Clock1, Font and Date class

For developing clock application with react native and typescript, this writing explains how to use Fonts and Date class, which is embedded in Javascript.

1. How to use Fonts

• Make project to develop mobile clock application. Install CocoaPods during making project.

$ npx @react-native-community/cli@latest init ClockTest react-native-template-typescript

• This application would use font, Major Mono Display. This font make the clock app look digital clock. Download font in this link: https://fonts.google.com/specimen/Major+Mono+Display
• Download, unzip the font file, MajorMonoDisplay-Regular.ttf
• Make the directory src/assets/fonts and move the font file here.

$ cd ClockTest
$ mkdir -p src/assets/fonts

• -p option here means --parents and it make parent directories when needed. If it is already existing, no error.

• Make react-native.config.js file in the project root directory. Root directory means where package.json file is located.

$ touch react-native.config.js

• Make code react-native.config.js as below.

react-native.config.js

module.exports = {
    assets: ['./src/assets/fonts'],
};

• Run the below command then font is automatically added.

$ npx react-native-asset

• How to apply font in the app is as below example.

App.tsx

import { Text, StyleSheet } from 'react-native';

export default function App() {
    return (
        <Text style={styles.text}>Hello!</Text>
    );
}

const styles = StyleSheet.create({
    text: {
        fontFamily: 'MajorMonoDisplay-Regular',  // Font name
        fontSize: 20,
    },
});

2. Date class

• Class is blue prints or drawings for making object. Class can be made and used as below.

JavaScript

class Date {
  // drawings contents
}

new className() // making object from class

• Date class is basically embedded in JavaScript and can be called as below. In the below example Date class make object based on current date and time and save it in const named time.

const time = new Date()
time.toLocaleDateString()  // Today date
time.toLocaleTimeString()  // Current time

• To make clock application, make App.tsx as below. This is just basic clock which show the time when it is rendered. Clock application should be updated and rendered every second to show current time, but this will be done in next article with some Hooks.

App.tsx

import React from 'react';
import {StyleSheet, SafeAreaView, Text} from 'react-native';

export default function App() {
  const time = new Date()
  return (
    <SafeAreaView style={StyleSheet.safeAreaView}>
      <Text style={[styles.digitFont, styles.time]}>
        {time.toLocaleTimeString()}
      </Text>
      <Text style={StyleSheet.digitFont}>{time.toLocaleDateString()}</Text>
    </SafeAreaView>
  )
}
const styles = StyleSheet.create({
  safeAreaView: {flex: 1, alignItems: 'center', justifyContent: 'center'},
  digitFont: {fontFamily: 'MajorMonoDisplay-Regular', fontWeight: '400'},
  time: {fontSize: 50}
})

• Build the app in simulator and run it to check how it does look like.

$ npm start
$ npx react-native run-ios
$ npx react-native run-android