Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native custom fonts load and display properly in simulator, but break in Expo?

$
0
0

I'm currently building my first iOS and Android application in React Native, but can't get any custom font files to properly display when running through Expo. All custom fonts display properly and throw no errors when the application is run with npx react-native run-ios / run-android, however running with expo start always triggers "Unrecognized font family" errors.

My current App.tsx:

export default class App extends React.Component{  state = {    fontsLoaded: false,  };  async loadFonts() {    await Font.loadAsync({'SFPro-Regular': require('./src/assets/fonts/SFPro-Regular.ttf'),    });    this.setState({ fontsLoaded: true });  }  componentDidMount() {    this.loadFonts();  }  render() {    if (!this.state.fontsLoaded) {      return <AppLoading />;    }    return(<View><Text style={{fontFamily: 'Comfortaa-Bold', fontSize: 100}}>TEST</Text></View>    );  }}

The application was originally started using npx react-native init, with Expo modules later installed for quickly testing on device. I've tried countless fixes for importing fonts over the past two weeks, and nothing seems to work – any suggestions or obvious errors I'm making?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>