React Native Fonts

The font is one of the important essences of any good UI(User Interface). It is very important to have a clear and beautiful font in your app. In this module, we will discuss different fonts and methods to use the font in react native.

In react js using google font is quite simple. We can use google fonts in react native, but before using it, we must install some packages. you should definitely know the font family's name that you will use because we would have to install packages for that, and each font family has its package. So let's start -

Installing packages :

[ i will be using the allan font family]

Step 1: expo install @expo-google-fonts/allan expo-font

Step 2: expo install expo-app-loading

Execute the commands above then you will be able to use that particular[here allan] google font.

[why use expo-app-loading?

Ans- our app loads before the loading of the font, so it's more likely that we would not be able to see the change. To fix this issue, we use app loading. It keeps splash screen until fonts are loaded.]

App.js code :

import React, { useState, useEffect } from 'react';


import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, Allan_400Regular, Allan_700Bold } from '@expo-google-fonts/allan';


export default () => {
  let [fontsLoaded] = useFonts({
    Allan_400Regular,
    Allan_700Bold,
  });


  let fontSize = 54;
  let paddingVertical = 6;
if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'#FAE2E7' }}>
         <Text
          style={{
            fontSize,
            paddingVertical,
           color:'red',
            fontFamily: 'Allan_700Regular',
          }}>
         javaTpoint
        </Text>
      </View>
    );
  }
};

Output:

Explanation: Let's talk about a few new things that are added here. I hope the code will seem familiar to you, and it is understandable as we have done basic operations. We will be dividing code into sub-parts for better understanding.

1. Importing font family

.import { useFonts, Allan_400Regular, Allan_700Bold } from '@expo-google-fonts/allan';

 By this we are importing our font style [Note- make sure to execute directed commands otherwise you will not be able to use font]

2. Intializing fontLoader

export default () => {
  let [fontsLoaded] = useFonts({
    Allan_400Regular,
    Allan_700Bold,
  });

 Here we have initialized fontsLoader by our desired/imported font.

3. Initializing fontSize and paddingVertical

let fontSize = 54;
  let paddingVertical = 6;

 This is an initialization, we are declaring our fontSize and padingvertical , so whenever in the project we will be using these words  'fontSize and padingvertical ', it would be initialized by 54 and 6. You do not have to initialize it again and again [ you can declare fontSize or paddingVertical as your wish, I have used 54 and 6 in the code that why I am explaining with the same value.]

4.Text styling

<view>
      <Text
          style={{


            fontSize,


            paddingVertical,


           color:'red',


            fontFamily: 'Allan_700Regular',


          }}>


         javaTpoint


        </Text>


      </View>

 As I said before, we do not have to initialize fontSize and padingvertical. It's just mentioned and will be initialized as the declared value. You can add styling as per your desire.

5. Using allan bold font  :

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, Allan_400Regular, Allan_700Bold } from '@expo-google-fonts/allan';
export default () => {
  let [fontsLoaded] = useFonts({
    Allan_400Regular,
    Allan_700Bold,
  });
let fontSize = 54;
  let paddingVertical = 6;
if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'#FAE2E7' }}>
         <Text
          style={{
            fontSize,
            paddingVertical,
           color:'red',
            fontFamily: 'Allan_700Bold',
          }}>
         javaTpoint
        </Text>
      </View>
    );
  }
};

Output :

We just need to modify Allan_400Regular to Allan_700Bold to use Allan's bold font.

 Let's use  some other fonts :

I will be using bangers this time.

Step 1: expo install @expo-google-fonts/bangers

Step 2: expo install expo-app-loading

Execute the commands above then you will be able to use that particular google font.

App.js code :

import React, { useState, useEffect } from 'react';


import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, Bangers_400Regular } from '@expo-google-fonts/bangers';


export default () => {
  let [fontsLoaded] = useFonts({
    Bangers_400Regular,
  });


  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' , backgroundColor : 'pink' }}>
        <Text
          style={{
            fontFamily: 'Bangers_400Regular',
            fontSize: 54,
            color : 'red'
          }}>


       javaTpoint


        </Text>
      </View>
    );


  }
};

Output :

[note-  explanation for the code remains the same as we have just changed the text from bold to regular.]

It totally depends upon you what fonts are needed. We can also use customized fonts by downloading them, uploading them in a folder, creating some js file to write down properties, and finally giving the source to our App.js file, but this becomes a bit complex as so many steps, or procedures are involved. In that sense, using google Fonts is a better option.