react native vector icons and fonts won't show after building apk

Question

custom font and icons from @expo/vector-icons not showing after building the apk. they do show on development using expo-font aync load.

how to load the font and the custom fonts while using apk without app crashing. currently images are loaded from assets folder perfectly.

Answer 1

When packaging your app for production, you have to bundle the font assets. This can be done by following these steps:

1. Copy your fonts to "assets/fonts", your fonts should have the file extension of "ttf" or "otf"
2. When using rn < 0.60 run npx react-native link
3. In Android Studio navigate to "app/src/main" and create an assets folder, if it doesn't exist already
4. Copy your fonts folder ("assets/fonts") to the newly created assets folder inside your Android Studio project
5. Create a react-native.config.js file with these contents:

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

6. Install react-native-vector-icons using npm install react-native-vector-icons
7. Follow additional steps mentioned for android react-native-vector-icons
8. Use Icons and your own font, e.g. using:

StyleSheet.create({
    someText: {
        fontFamily: "MyFont"
    }
});

Reference: medium.com