Custom Font not loading React-Native - react-native

Question

I'm trying to load a custom font from my assets folder within my project. I've looked up online and so far after doing all the steps, I'm still faced with the same issue.
I've added the source of the fonts into my package.json file like this:
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
I've imported expo-font into my project as well, and I'm simply calling the fontFamily like this:
<Text style={{ textAlign: 'center', fontFamily: 'Montserrat-Regular', fontSize: 20 }}>Home</Text>
am I missing something?
EDIT: I forgot to mention that I'm using a custom font in another screen, the exact same way...yet this screen is giving me issues.
The files I am using are Montserrat-Regular.tff, Montserrat-Bold.tff, and Montserrate-Light.tff
The path for these files are MyProject/assets/fonts/MyFonts.ttf

Answer 1

You don't have an Android folder, so it looks like you're using Expo, not React Native.
So I'll show you how to do Expo.
Take the Open Sans zipfile that you downloaded, extract it and copy
Montserrat-Regular.ttf into the assets directory in your
project. The location we recommend is your-project/assets/fonts.
and you can run expo install expo-font
Add the following import in your application code in App.js: import * as Font from 'expo-font';
The expo library provides an API to access native functionality of
the device from your JavaScript code. Font is the module that deals
with font-related tasks. First, we must load the font from our
assets directory using Font.loadAsync(). We can do this in the
componentDidMount() lifecycle method of the App component. Add the
following method in App: Now that we have the font files saved to
disk and the Font SDK imported, let's add this code:
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
});
}
// ...
}
This loads Open Sans Bold and associates it with the name 'Montserrat-Regular' in Expo's font map. Now we just have to refer to this font in our Text component.
Note: Fonts loaded through Expo don't currently support the fontWeight or fontStyle properties -- you will need to load those
variations of the font and specify them by name, as we have done here
with bold.

Answer 2

Check your Info.plist file from the iOS folder and looking for a UIAppFonts key, you should see something similar to:
<key>UIAppFonts</key>
<array>
<string>Montserrat Regular.ttf</string>
</array>
Also, your style will be like this;
fontFamily: "Montserrat", instead fontFamily: "Montserrat-Regular".

Answer 3

I managed to fix the issue I was having. It seems I needed to give the app a moment to load the font, still not sure why this was giving me the issue, but here is what my working code looks like now in case anybody else is having the same problem
This is the code I added into the screen in which I was trying to load my custom font.
constructor(props) {
super(props);
this.state = {
fontLoaded: false
}
}
async componentDidMount(){
await Font.loadAsync({
'Montserrat': require('../assets/fonts/Montserrat.ttf'),
}).then(() => {
this.setState({fontLoaded: true})
})
}
<View>
{ this.state.fontLoaded == true ? (
<Text style={{ fontSize: 40, fontFamily: 'Montserrat', color:'white', marginLeft: 10}}>Home</Text>
) : (<Text> Loading...</Text>)
}
</View>