[NativeBase] fontFamily Roboto_medium is not a system font 에러

1. 원인

expo 사용 시 발생하는 에러다.

NativeBase의 getting started with expo를 참조하면 다음과 같은 문구가 있다.

NativeBase use some custom fonts that can be loaded using Font.loadAsync function. Check out the Expo Font documentation. 

커스텀 폰트를 Font.loadAsync로 로드해야 한다는 문장이다.

문서를 보니 ios일때는 시스템 폰트를, 안드로이드 일때는 Roboto_medium이라는 폰트를 사용한다.

따라서 Roboto_medium 폰트를 가져와 주어야 한다.

2. 해결책

앱을 시작할 때 다음 코드를 실행해 폰트를 로딩한다.

// At the top of your file
import { Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';

// Later on in your component
async componentDidMount() {
  await Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    ...Ionicons.font,
  });
}

추가적으로, 폰트가 로딩되지 않았으면 render를 지연시키는 코드를 넣어준다.

stackoverflow에 관련된 코드가 업로드 되어 있다. (react state를 이용해 loadAsync가 완료되면 render가 실행되도록 한다)

https://stackoverflow.com/questions/47308557/loading-font-native-base-error

2-2. 해결책2

NatvieBase의 안드로이드 폰트 설정을 변경해주면 된다.

NativeBase docs의 button 부분을 보면 다음과 같은 문구가 있다.

You can change the default button text case(in Android) from variables file after 

실제로 NativeBase에서 제공하는 예제 코드를 보면 설정 파일을 직접 생성해 적용하는 부분이 있다. 해당 부분을 참조해 해결이 가능하다.