2
votes

I used the custom font on react-native expo project. It works well on the expo platform with an android emulator. But After I built my project as APK file, it does not show all the text as my custom font. I followed the tutorial like this (https://docs.expo.io/versions/latest/guides/using-custom-fonts/) but it doesn't work. Is there any solution to work on android?

I tried to use the custom font like this.

class App extends Component {
  state = {
    fontLoaded: false
  };

  async componentDidMount() {
    await Font.loadAsync({
      "Antonio": require("./assets/fonts/Antonio-Light.ttf"),
      "Antonio-Bold": require("./assets/fonts/Antonio-Bold.ttf")
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    const { fontLoaded } = this.state;
    if (!fontLoaded)
      return (
        <Text>Loading.....</Text>
      );
...........

This is my package.json file.

...


  "dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "angle-normals": "^1.0.0",
    "art": "^0.10.1",
    "bunny": "^1.0.1",
    "expo": "^34.0.3",
    "expo-asset": "latest",
    "expo-asset-utils": "^1.1.1",
    "expo-font": "^6.0.1",
    "expo-gl": "~5.0.1",
    "expo-pixi": "^1.2.0",
    "expokit": "^32.0.3",
    "gl-mat4": "^1.1.4",
    "gl-react": "^3.13.0",
    "gl-react-expo": "^3.16.3",
    "lodash": "^4.17.11",
    "matter-js": "^0.13.0",
    "native-base": "^2.10.0",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-motion": "^0.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-animatable": "^1.2.2",
    "react-native-donkey-kong": "^0.5.1",
    "react-native-extended-stylesheet": "git+https://github.com/bberak/react-native-extended-stylesheet.git",
    "react-native-game-engine": "^0.10.1",
    "react-native-gesture-handler": "~1.2.1",
    "react-native-paper": "2.1.3",
    "react-native-responsive-screen": "^1.3.0",
    "react-native-svg": "^9.11.1",
    "react-native-web": "^0.11.2",
    "react-navigation": "^3.2.1",
    "react-navigation-redux-helpers": "^2.0.9",
    "react-redux": "^6.0.0",
    "react-style-proptype": "^3.2.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "regl": "^1.3.0"
  },

...

This is my app.json file.

{
  "expo": {
    "name": "Zenduja",
    "slug": "Zenduja-Pro",
    "privacy": "unlisted",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#222222"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "assets/fonts/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "package": "com.aaa.aaa"
    },
    "packagerOpts": {
      "assetExts": [
        "ttf",
        "mp4",
        "otf",
        "xml"
      ]
    },
  }
}


Please help me. Thanks.

Updated question.

This is my expo snack loading font project.

https://snack.expo.io/@angelsinej/font-loading

1
Can you reproduce in expo snack?Oleg
Thanks for your response. As I mentioned it does not work after built as an APK file. I will reproduce in expo snack right now and let you know after done.goldvenus
but it;s work in snack?Oleg
check in you app.json: assetBundlePatterns":Oleg
like: "assetBundlePatterns": ["assets/fonts/*.*"]Oleg

1 Answers

1
votes

Add to app.json like:

"assetBundlePatterns":["assets/fonts/*"]  

Update to sdk 34 and related react-native package.

and recompile apk