A Guide on Using Custom Fonts in React Native.[Android]

let's go to know how to use a custom font in React native 🚀

Prepare your font files:

• Obtain the font files you want to use. These files should have extensions like .ttf, .otf, etc.
• Rename the font files to ensure they have simple, lowercase names without spaces or special characters. For example, MyFont-Regular.ttf can be renamed to myfont.ttf.

Add font files to your project:

• Create a new directory in your React Native project’s root folder and name it something like assets/fonts. If the assets and fonts directories don't exist, you can create them.
• Copy the font files into the assets/fonts directory.

Link the font files:

• For React Native versions below 0.60, you need to link the font files manually. Run the following command in the terminal in your project’s root directory:

react-native link

For React Native versions 0.60 and above, there’s no need to link the fonts manually as it’s done automatically.

Update the native build files:

• If you’re using iOS, open your project in Xcode and follow these steps:
• In Xcode’s Project navigator, right-click on the project name and select “Add Files to [Your Project Name]”.
• Navigate to the assets folder in your project and select the fonts folder.
• Make sure to select the “Create folder references” option and check the “Copy items if needed” box.
• Click the “Add” button to add the font files to your project.
• If you’re using Android, open your project in Android Studio and follow these steps:
• In Android Studio’s Project pane, navigate to app > src > main.
• Right-click on the assets folder (create one if it doesn't exist) and select "Show in Files".
• Copy the fonts folder from your project's assets folder into the assets folder in Android Studio.

Register the fonts:

• Create a file called react-native.config.js in the root of your project if it doesn't already exist.
• Open react-native.config.js and add the following code:

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

Install and link necessary packages:

• Run the following command to install react-native-vector-icons if you haven't already:

npm install react-native-vector-icons

• Follow the installation instructions for react-native-vector-icons to ensure it's properly linked in your project.

Update your React Native code:

• In your component file, import the necessary components:

import { Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'; // Or any other icon library you prefer

Create a style object for your text component, specifying the font family:

const styles = StyleSheet.create({
  text: {
    fontFamily: 'MyFont', // Use the actual font family name here
  },
});

Use the custom font in your component:

<Text style={styles.text}>Hello, Custom Font!</Text>

That’s it! You’ve successfully added and used a custom font in your React Native project. Remember to reload or rebuild your app to see the changes take effect.

Thank You So Much For Reading❤️🥂