How to add custom font to react native app

To add a custom font to a React Native app, you can follow these steps:

1. Place the font file in your project: You need to place the font file (in .ttf or .otf format) in your project’s assets/fonts directory. If the fonts directory doesn’t exist, create it manually.
2. Add the font to the app’s Info.plist (for iOS) or AndroidManifest.xml (for Android) file: You need to add the font file to the UIAppFonts array in the app’s Info.plist file (for iOS) or to the AndroidManifest.xml file (for Android).

For iOS, you can add the following to your Info.plist file:

<key>UIAppFonts</key> <array> <string>./assets/fonts/FontName.ttf</string> </array>

For Android, you can add the following to your AndroidManifest.xml file:

<meta-data android:name="com.google.android.gms.fonts" android:resource="@array/com_google_android_gms_fonts_certs"> </meta-data>

3. Use the font in your app: To use the font in your app, you need to import it and set it as the fontFamily for your text components. For example:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.customFont}>Hello World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customFont: {
    fontFamily: 'FontName',
    fontSize: 24,
  },
});

export default App;

Make sure to replace FontName with the name of the font file you added to your project.

That’s it! Your custom font should now be available and used in your React Native app.