CODEWITHSUNDEEP
javascriptreact-native
Kong Kvistad
Kong Kvistad

Reputation: 23

How do i use custom fonts in navigation tab in react native + expo?

I can load and render custom fonts for text in general, but when i try to specify the font Family for my navigation bar, i get an error: "fontfamily 'poetsenone' is not a system font and has not been loaded through Font.Loadsync.

i've loaded the font in my root comopnent @ app.js using Font.Loadasync.

// homescreen.js:

static navigationOptions = {
  title: 'Scan',
  tabBarOptions: {
    labelStyle: {
      fontSize: 20,
      fontFamily: "poetsenone"
    },
    tabStyle: {

    },
    style: {
      marginTop: 23,
      backgroundColor: '#423D3D',

    },
  }
};



 //app.js

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'poetsenone': require('./assets/fonts/poetsenone.ttf')
    });
  }

  render() {
    return (
      <AppContainer />
    );
  }
}

Isn't app.js typically the top-level component? what's going on?

Upvotes: 1

Views: 2970

Answers (1)

Kai
Kai

Reputation: 2599

Remove the quotes around 'poetsenone' in loadAsync and it should work.

Upvotes: 1

Related Questions