[React Native] fontFamily fontName is not a system font and has not been loaded through Font.loadAsync.

Custom Font를 활용하기 위해 spoqa 폰트를 import하는 과정에서 아래와 같은 문제가 발생했습니다.

 

fontFamily "spoqa-regular" is not a system font and has not been loaded through Font.loadAsync. - If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

 

Dependencies

React Native v0.61

 

해결방법

  state = {
    loading: true
  };

  async componentDidMount() {
    await Font.loadAsync({
      "spoqa-bold": require("./assets/fonts/spoqa-bold.ttf"),
      "spoqa-light": require("./assets/fonts/spoqa-light.ttf"),
      "spoqa-regular": require("./assets/fonts/spoqa-regular.ttf"),
      "spoqa-thin": require("./assets/fonts/spoqa-thin.ttf")
    });

    this.setState({ loading: false });
  }
  
    render() {
    const { loading } = this.state;

    if (loading) {
      return <View></View>;
    }

Font.loadAsync를 통해서 비동기로 Custom Font를 import하는 과정에서 loading을 처리해줌으로써 Font가 import가 되기 전에 View가 붙는 것을 방지함으로써 문제를 해결했습니다.