CODEWITHSUNDEEP
javascriptreact-nativefontsreact-navigationexpo
Robert Yang
Robert Yang

Reputation: 41

How to implement fonts once whilst using React-Navigation and Expo?

I'm currently using Expo and React-Navigation for my project. I'm having difficulty coming up with and finding a solution to implement custom fonts into my project while I am using React-Navigation and Expo.

Here is Expo's method of implementing custom fonts: https://docs.expo.io/versions/v15.0.0/guides/using-custom-fonts.html

Expo offers an asynchronous method of loading fonts from an assets folder, which requires adding these few lines of code into the componentDidMount() of wherever my top level component is defined:

(copied from the previously placed link)

componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
}

In theory, I could implement this in every page of my application, but that would cause my application to load more slowly. Ideally I would only like to implement Expo's steps only once in my top level component (explained here: Using custom Font in react native with expo, loading font every time), because implementing this solution into every component of the application would cause it to load more slowly.

In my App.js I export a navigator as opposed to a component that contains a componentDidMount() function call. Here's what my App.js looks like right now.

export default SimpleApp = DrawerNavigator({
  Login: {
    screen: SomeComponent,
    navigationOptions: {
      acceptPan: false,
    },
  },
  MainTabs: {
    screen: SomeTabNavigator,
    navigationOptions: {
      tabBarPosition:'top',
      headerLeft: null
    }
  }
});

Here, I export a DrawerNavigator, which is not a component. So right now, I actually don't even have a top level component. To reiterate, I would like to have my App.js export some top level component that preserves the navigation, and allows me to implement Expo's steps for importing custom fonts.

Thanks!

Upvotes: 2

Views: 1162

Answers (1)

Robert Yang
Robert Yang

Reputation: 41

I inadvertently stumbled upon the answer whilst trying to implement a custom status bar for my app. Here's the link to where I found my solution (refer to ezzak's response).

https://github.com/react-community/react-navigation/issues/1441

Basically, you are actually allowed to treat navigators as components!

Don't forget to capitalize the first letter of all class components.

Upvotes: 2

Related Questions