#expo/vector-icons, how to load font using react-navigation - react-native

Question

I am trying to use this with react-navigation and I keep getting:
fontFamily 'Feather' is not a system font and has not been loaded
through Expo.Font.loadAsync
I am using the Font.loadAsync() method in my loading component but the error keeps showing up. I actually ended up removing all vector icons from my app in order to start clean.
So my question is if I have a switch navigator which starts with a loading screen (this starts the auth check) and switches either to login screen or root tab container which contains the meat of my app. I cant seem to figure out where to call Font.loadAsync()
Here is my MainNavigator.js
export default createBottomTabNavigator(
{
Friends: FriendsList,
Profile: Profile,
Settings: Settings
},
{
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({tintColor}) => {
const {routeName} = navigation.state;
let iconName;
if (routeName == "Friends") {
iconName = "users"
} else if (routeName == "Profile") {
iconName = "user"
} else if (routeName == "Settings") {
iconName = "settings"
}
return <Feather name={iconName} size={20} color={tintColor} />
}
}),
tabBarOptions: {
style: {
backgroundColor: "#fff"
},
inactiveTintColor: "#999",
activeTintColor: TERTIARY_COLOR
}
}
)
App.js
// Screens for Switch Navigator
import AuthScreens from "./components/screens/AuthScreens";
import LoadingScreen from "./components/screens/Loading";
import MainNavigator from "./MainNavigator";
const AppContainer = createAppContainer(createSwitchNavigator(
{
LoadingScreen,
AuthScreens,
MainNavigator
},
{
initialRouteName: "LoadingScreen"
}
))
Loading Screen
export default class LoadingScreen extends Component {
async componentDidMount() {
try{
await Font.loadAsync({
FeatherFont
})
firebase.auth().onAuthStateChanged(user => {
this.props.navigation.navigate(user ? "MainContainer" : "LoginScreen")
})
} catch(error) {
alert(error)
}
}
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center"}}>
<ActivityIndicator/>
</View>
)
}
}

Answer 1

You need to load them in the App.js inside _loadResourcesAsync unsing the Font.loadAsync()
_loadResourcesAsync = async () => {
// blablabla
return Promise.all([
Asset.loadAsync([
require('random images'),
]),
Font.loadAsync(
// this line is where you load the font, name and path
{Feather: require('./assets/fonts/Feather-path.ttf')},
),
]);
};
And then inside the render function :
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" />
<AppNavigator style={styles.container} />
<BarraOffline connected={this.state.isConnected}/>
</View>
);
}
}

Answer 2

I don't know your definition of FeatherFont,
but I don't think Font recognize it as a font.
Font is the module that deals with font-related tasks.
First, we must load the font from our assets directory using
Expo.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:
We need a way to re-render the Text component when the font has finished loading.
First we initialize fontLoaded to false in the App class
constructor:
class App extends React.Component {
state = {
fontLoaded: false,
};
async componentDidMount() {
await Font.loadAsync({
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
this.setState({ fontLoaded: true });
}
}
With React Native you specify fonts in Text components using the fontFamily style property. The fontFamily is the key that we used with Font.loadAsync.
Usage
<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
Hello, world!
</Text>