React-native-ui-kitten: Custom fonts not showing in ui kitten components

[zzzzasd]

💬 Question

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.0.0 |
| @ui-kitten/components | 5.0.0 |

I'm facing an issue where custom fonts only work in Text components. Button components for example, do not render the correct font.

I have mapped the fonts using CustomMapping.json.

For both Male/Female buttons do not show the correct font, while I've added a Text component in the Continue button where the correct font is being used.

Does anyone know the reason for this? Thanks

[magnusfernandes]

The custom mapping isn't working for me at all. Followed the docs.
https://akveo.github.io/react-native-ui-kitten/docs/guides/branding#typography

@artyorsh

[JamieBradders]

Same issues here, has anyone found a workaround?

[JamieBradders]

So for me it turned out to be human error. I named react-native.config.js incorrectly, I had added react-native-config.js and my issue with custom mapping was because I had set the order of some properties incorrectly. I ended up doing a side by side comparison with the mapping.json file from node_modules.

So, with that embarrasment out of the way, it seems to be working as expected for me now 🙈

[cmck]

The custom mapping isn't working for me at all. Followed the docs.
https://akveo.github.io/react-native-ui-kitten/docs/guides/branding#typography

@artyorsh

if custom fonts do not work at all ensure that you add customMappingPath: './path-to/mapping.json', to evaConfig in metro.config.js. Clear the npm cache with npm start -- --reset-cache after these changes. Also ensure that the fonts are named correctly in the mapping file. If on Mac OS: open the font in Font Book app. On iOS, the Family property will be considered. However, on Android, the file name holds the reference to the font - therefore rename your font file name to the 'Family' property.

[aminqp]

The custom mapping isn't working for me at all. Followed the docs.
https://akveo.github.io/react-native-ui-kitten/docs/guides/branding#typography
@artyorsh

if custom fonts do not work at all ensure that you add customMappingPath: './path-to/mapping.json', to evaConfig in metro.config.js. Clear the npm cache with npm start -- --reset-cache after these changes. Also ensure that the fonts are named correctly in the mapping file. If on Mac OS: open the font in Font Book app. On iOS, the Family property will be considered. However, on Android, the file name holds the reference to the font - therefore rename your font file name to the 'Family' property.

Thanks dude. you save my life. Finally, after 2 days I found your solution. The font-weight was my problem on Android with ui-kitten. :)
I edited basic ui-kitten configs inside mapping.json from here https://raw.githubusercontent.com/eva-design/eva/master/packages/eva/mapping.json and then replace all font-weights bold with normal.