The fonts are in my asset folder, they are also inside xcode copy bundle resources, and also inside resource folder. I already also ran react-native link, but it still doesn't find the font. Is there something I missed? Please see attached images for reference:
enter image description here
Add the Font File to Your Xcode Project To add a font file to your Xcode project, select File > Add Files to “Your Project Name” from the menu bar, or drag the file from Finder and drop it into your Xcode project. You can add True Type Font (. ttf) and Open Type Font (. otf) files.
React Native Part:
Add fonts to assets/fonts
of the root folder of react-native
project
react-native-project/
package.json
ios/
android/
assets/
fonts/
GROBOLD...
...
Add the below snippet to package.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Run the following command in your react-native
project to link your assets.
react-native link react-native-vector-icons
iOS Part:
Check info.plist
for the font files whether they have added already.
Delete derived data, build and run your Xcode project.
Double check the fonts added to project by navigating to the AppDelegate.m
file and add these lines of code below NSURL *jsCodeLocation
;
for (NSString* family in [UIFont familyNames])
{
NSLog(@"%@", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(@" %@", name);
}
}
Android Part:
Copy the font files to if they are not exist already.
android/
app/
src/
main/
assets/
fonts/
GROBOLD...
'rnpm' is deprecated for version > 0.60 and will be removed completely in major release.
Please follow below steps to start using custom fonts in your react native app
Create react-native.config.js
in root directory
Add below code in react-native.config.js
module.exports = {
assets: ['./assets/fonts']
};
In terminal, run npx react-native link
command
Add a style to the component e.g. <Text style={styles.titleText}>Home Screen</Text>
Add a below property to title
titleText: { fontFamily: 'name-of-font-without-ttf-extension'}
Run your app npx react-native run-android / run-ios
You will see the new font added to your app.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With