It works on iOS, but not on Android

fershibli commented 12 months ago

Description

The project was already running on both iOS and Android without errors. I followed the steps of a Youtube tutorial and checked on many different sources, including this repository’s README.md. One of the steps, for making it run on both systems (Android and iOS), consisted in naming the font files with their fullnames (for example: "GT Walsheim Bold.otf") Then it worked on iOS, through Xcode Simulator. But it didn't work on Android Studio's Device. Am I missing some kind of configuration on Android side?

Environment

MacOS Sonoma 14.0 (Intel i9)
Android Studio Giraffe | 2022.3.1 Patch 2 Runtime version: 17.0.6+0-17.0.6b829.9-10027231 x86_64. VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
React 18.2.0
React Native 0.72.6
Styled Components ^6.1.0
npx 10.2.0
react-native-asset ^2.1.1
react-native-vector-icons ^10.0.1

react-native.config.js

module.exports = {
  assets: ['./assets/fonts/'],
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

link-assets-manifest.json

{
  "migIndex": 1,
  "data": [
    {
      "path": "assets/fonts/GT Walsheim Bold.otf",
      "sha1": "cc9e24e3705080cfc84a5875408670c4c6f6274e"
    },
    {
      "path": "assets/fonts/Inter Bold.otf",
      "sha1": "889ba4eaa4088d73f33cc98ae4ef907b4072c6a5"
    },
    {
      "path": "assets/fonts/Inter Light BETA.otf",
      "sha1": "b888e437c703a2efea8f39ed36512fe964891f53"
    },
    {
      "path": "assets/fonts/Inter Medium.otf",
      "sha1": "ca1fd951ca585d18be345331da8055e027072511"
    },
    {
      "path": "assets/fonts/Inter Regular.otf",
      "sha1": "d32253389158b0e08276b7a4e1401a5e779a1d0f"
    },
    {
      "path": "assets/fonts/Inter Semi Bold.otf",
      "sha1": "3cb26a799cf631657608fd2a2dd60b2502537bde"
    }
  ]
}

Attempts

Use ttf instead of otf, but I didn't have success (but I may try again, since I didn't delete the otf with the same name).
Rename all files back to their original names (with dashes instead of spaces)
Cleaned cache with .gradlew clean (inside android folder)
Removed Build folders

Observations

Android Studio presents TWO different assets/fonts folders on the same hierarchy: one with my custom fonts, the other with other fonts that I didn't knew I had, but when I select it the top bar says "ReactNativeVectorIcons>fonts" (as shown bellow). Is it possible that they are conflicting?

If there's any other information that you need from my part, please ask away and I'll provide it asap.

fershibli commented 12 months ago

Just to highlight something that may get behind during the reading of my previous text: I tried to replace all the fonts with ttf, but it still didn't work on Android, but it worked on iOS. My guesses:

conflict with "react-native-vector-icons"
it's the MacOS (I'll try to run it on Linux later, then I'll update this thread)

fershibli commented 12 months ago

Another update: I did try to rename all the fonts without spaces or dashes, as described on this video tutorial. It didn't work, but I might try it on Linux once I get home. This looks like something really tricky...

fershibli commented 11 months ago

I tried on Linux, but it didn't work neither... I'm convinced that this must be a conflict with react-native-vector-icons. (OR I'm missing a step)

fershibli commented 11 months ago

Fixed by removing react-native-splash-screen from the project and making the whole process again for adding fonts from scratch, but using a different name scheme for each platform using const FONTS = { ..., Platform.select({ ios: ""., android: "" }) as described on the previous video tutorial that I mentioned.

Good luck for you that are reading, I hope this helps you with your own issue.

fershibli commented 11 months ago

Just to address that I added back react-ntive-splash-screen to my project, since the issue that I had with TextInput was solved and it also solved the conflict with fonts. TYSM @sunjaaa

unimonkiez / react-native-asset