So I have a bit of code in react-native that needs to wait for a font to load before displaying a page. I have two different returns in my render method depending on if the app
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}
So in the componentDidMount() method I wait for the font to finish loading before changing the state of the app to say it is ready.
render() {
//Checks to see if the font loaded, if it has not it displays a temp screen
if (!this.state.isReady) {
return <View></View>
}
So if the state is not ready I return a blank screen (could definitely be better). Then once the app is ready, I return the actual proper view with the loaded fonts:
render() {
//Checks to see if the font loaded, if it has not it displays a temp screen
if (!this.state.isReady) {
return <View></View>
}
return (
<NavigationContainer>
<Stack.Navigator>
.....
I hope this helps!