Use Custom Fonts In ReactNative App

Let's use custom fonts in you react-native app

---

Create a react native app with typescript or javascript

npx react-native init [ProjectName] --template react-native-template-typescript

Create a fonts folder & copy your fonts into this folder

mkdir fonts

Create react-native.config.js file in the root of your project

touch react-native.config.js

Add following code in react-native.config.js file

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

Run following command to link fonts to your project

npx react-native-asset

Now open App.tsx file and use your custom font family

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Italic}>Italic</Text>
      <Text style={styles.Bold}>Bold</Text>
      <Text style={styles.Regular}>Regular</Text>
      <Text style={styles.Light}>Light</Text>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {padding: 10},  
  Bold: {fontSize: 30, fontFamily: 'Nunito-Bold'},
  Light: {fontSize: 30, fontFamily: 'Nunito-Light'},
  Regular: {fontSize: 30, fontFamily: 'Nunito-Regular'},
  Italic: {fontSize: 30, fontFamily: 'Nunito-Italic'},
});

---

Get Full Source Code In GitHub