Best React Nat­ive Font Fam­ily for Mobile App Development

Are you a busi­ness own­er who wants to serve Android & iOS users with seam­less exper­i­ences and has budget con­straints as well? If that answers yes, your busi­ness needs hybrid mobile apps. React Nat­ive frame­work is the ulti­mate choice among app developers for cross-plat­form app development.

Being an open-source frame­work, React Nat­ive have numer­ous lib­rar­ies of nat­ive ele­ments, includ­ing APIs, nav­ig­a­tion, fancy vec­tor icons, anim­a­tions, and font fam­il­ies. Its com­munity mem­bers are con­stantly adding value with the addi­tion of more lib­rar­ies. Though there can be sev­er­al details around React nat­ive lib­rar­ies, this blog will be con­fined to dis­cuss­ing React nat­ive font family. 

What is React Nat­ive font family? 

The core com­pon­ent here is the Text con­figured to dis­play text on the screen to the users. This com­pon­ent sup­ports styl­ing, nest­ing, and touch hand­ling. Titles and body text with sim­il­ar styl­ing are often grouped togeth­er as fonts of the same fam­ily are referred to as font fam­ily. As developers use font­Fam­ily while writ­ing code in React Nat­ive, the text will auto­mat­ic­ally inher­it prop­er­ties and font styl­ing of the font fam­ily it belongs to. 

React Nat­ive text font fam­ily list

Though React Nat­ive default font is San Fran­cisco for iOS and Roboto for android, there are plenty oth­er font fam­il­ies that both OSs support. 

Sup­por­ted React nat­ive text font fam­ily list for Android

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Text, StyleSheet} from 'react-native';


styles=StyleSheet.create({
    scroller: {
        flex: 1,
    }
});


export default class AndroidFonts extends Component{
  render (){
    return(
      <ScrollView style={styles.scroller}>
        <Text style={{fontFamily: 'normal'}}>  normal </Text>
        <Text style={{fontFamily: 'notoserif'}}>  notoserif </Text>
        <Text style={{fontFamily: 'sans-serif'}}>  sans-serif </Text>
        <Text style={{fontFamily: 'sans-serif-light'}}>  sans-serif-light </Text>
        <Text style={{fontFamily: 'sans-serif-thin'}}>  sans-serif-thin </Text>
        <Text style={{fontFamily: 'sans-serif-condensed'}}>  sans-serif-condensed </Text>
        <Text style={{fontFamily: 'sans-serif-medium'}}>  sans-serif-medium </Text>
        <Text style={{fontFamily: 'serif'}}>  serif </Text>
        <Text style={{fontFamily: 'Roboto'}}>  Roboto </Text>
        <Text style={{fontFamily: 'monospace'}}>  monospace </Text>        
      </ScrollView>
    );
  }
}


AppRegistry.registerComponent('AndroidFonts', () => AndroidFonts);

Also Read: Top React Tools & Lib­rar­ies That Every React Nat­ive Developer Must Know

Sup­por­ted React nat­ive text font fam­ily list for iOS

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Text, StyleSheet} from 'react-native';
styles=StyleSheet.create({
    scroller: {
        flex: 1,
    }
});
export default class IosFonts extends Component{
  render (){
    return(
      <ScrollView style={styles.scroller}>
        <Text style={{fontFamily: 'Academy Engraved LET'}}>Academy Engraved LET </Text>
        <Text style={{fontFamily: 'AcademyEngravedLetPlain'}}>AcademyEngravedLetPlain </Text>
      </ScrollView>
    );
  }
}
AppRegistry.registerComponent('IosFonts', () => IosFonts);

If you want  use oth­er font fam­il­ies please refer to the below table -

How to add cus­tom fonts in React native ?

In addi­tion to the exist­ing lib­rary of React nat­ive font fam­ily, you can per­son­al­ize your mobile apps by installing cus­tom font fam­il­ies. Shar­ing the step-by-step pro­cess with you here. 

1. Select a font fam­ily you would like to use. Don’t for­get to check the file name. For Android, the file name remains the same, but for iOS, the ​“Post­Script name” will be added before the file name. So, you need to rename the font files; if you are using the font ​“SF UI Dis­play” and its files are like the ones shown below, then for iOS, you have to use ​“SFUID­isplay-Bold” des­pite your file name ​“SFUIDisplayBold.otf”.

2. Next step is the addi­tion of fonts to assets. 

3. Now you have to define the assets dir­ect­ory, when using React Nat­ive ver­sion ≥ 0.60 cre­ate file ​“react-native.config.js and add below code 

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
 };

4. If you are still using React Nat­ive ver­sion < 0.60. You need to men­tion the loc­a­tion of cus­tom fonts in React nat­ive. Adding the below lines in package.json can make it hap­pen for you. Make sure you add the right path in the source folder else it won’t be able to fetch the font files.

Also Read: Which Mobile App Devel­op­ment Frame­work Is Right For You?

5. Next thing is to link assets. Due to auto-link­ing, link and unlike com­mands are now removed from React Nat­ive 0.69. So, for the ver­sions above 0.69 run below com­mand in terminal 

npx react-nat­ive-asset

And, for ver­sions below 0.69 use 

$ npx react-nat­ive link 

For iOS link com­mand will link fonts in Info.plst and for Android cre­ates dir­ect­ory (android/app/src/main/assets/fonts). 

6. Now, you can use this newly added ​“font­Fam­ily” any­where in the app using React nat­ive styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontFamily: "SFUIDisplay-Bold"
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
    fontFamily: "SFUIDisplay-Semibold"
  }
});

React Nat­ive Paper Fonts

I’m sure you’ve heard of React Nat­ive paper, if not, let me tell you that it’s renowned design lib­rary for React nat­ive com­pon­ents. Like React Nat­ive, it is open-source and avail­able for free. Mobile app developers often use its high-qual­ity design ele­ments to bring a nat­ive feel to the app. Itʼs led by call­stack and has offi­cial Face­book part­ners as contributors.

Also Read: React Nat­ive Tutori­als — Learn to Build Nat­ive Mobile Apps with React

React Nat­ive Paper gives you access to com­pact code to code for UI/UX design of your mobile app. Hence, saves you a lot of time writ­ing long and com­plex code for sev­er­al use cases from scratch. 

Learn to install cus­tom fonts using .ttf files, con­fig­ure fonts in ThemePro­vider and addi­tion of font vari­ants to the mater­i­al design from React Nat­ive Git­Hub lib­rary here. 

Wrap­ping Up 

To get a cross-plat­form mobile app for your busi­ness, React Nat­ive app devel­op­ment ser­vices can help you at their best. WeDoWebApps is a React Nat­ive app devel­op­ment com­pany with strong expert­ise in design­ing desir­able mobile applic­a­tions. To ini­ti­ate your React Nat­ive pro­ject, share your require­ments here. also, read more about React Nat­ive Upgrade Help­er: Stream­line Your App Upgrades with Ease and Which Mobile App Devel­op­ment Frame­work Is Right For You?