Before RN < 0.69 You just using react-native.config.js
and also npx react-native link
, but they are no longer supported.
* You can still use react-native link-assets but it requires extra package now: @react-native-community/cli-link-assets
Current workaround is to go native...
You need to use fontdrop.info or Font Book.app to find the correct font family name
Follow the offical doc: Adding a Custom Font to Your App
You can copy or link to your file as long as the XCode can find the file. remember to edit the info.plist
This one is more tricky: you have 2 places that can style with font-family but they require their own setup.
Android XML is responsible for App theme and also native components theme (e.g. spinner used by react-native-picker)
Android XML won't load RN default assets folder (android/app/src/main/assets/fonts
), any font-family in theming XML has to be defined in Android Font XML [doc] or can be referred in "@font/{filename without extension}"
(File-based resource)
The filename must only contain lowercase alphabet, number and underscore (no space or hyphen)
the fonts required in JS bundle in your app need to be placed in android/app/src/main/assets/fonts
, using format "{FONT_FAMILY_NAME (space & other symbol allowed)}\_{style}.{FILEEXT}
"
if you need to place in other location, check react-native-asset or @react-native-community/cli-link-assets
If you setup them correctly the font is ready to use in StyleSheet in RN.
REMARKS: defaultProps
has been removed in react 19 === react native 0.80, that mean you either write your own Text Wrapper or use react-native-element etc to feed your default font setting into the components.