RN 폰트 적용 오류

지금 프로젝트에서 RN(React-Native)와 css-in-js Emotion을 같이 사용하고 있는데 RN에서 Global Style 적용을 위해

	import {Global} from '@emotion/react'

해서 사용해보려고 했는데 안된다.

React-Native가 지원했던 방법

	import {Text} from 'react-native'
	
	Text.defaultProps.style = {fontFamily: 'FONT'}

React Native 0.56부터 Text.prototype이 안먹는다. ㅠ

외부 라이브러리 react-native-global-props

업데이트를 안한지 4~6년이나 되서 사용하기 두렵다..

expo-font

리액트 공식문서에서 권장하는 방법과
expo에서 제공하는 useFonts Hook 을 사용한 방법이다.

//App.tsx
	import {useFonts} from 'expo-font'
	
	const [fontsLoaded] = useFonts({
    'SpoqaHanSansNeo-Bold': require('spoqa-han-sans/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.otf'),
    'SpoqaHanSansNeo-Light': require('spoqa-han-sans/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.otf'),
    'SpoqaHanSansNeo-Medium': require('spoqa-han-sans/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.otf'),
    'SpoqaHanSansNeo-Regular': require('spoqa-han-sans/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.otf'),
    'SpoqaHanSansNeo-Thin': require('spoqa-han-sans/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.otf'),
  });

// CustomText.tsx
import styled from '@emotion/native';

const CustomText = styled.Text`
  font-family: 'SpoqaHanSansNeo-Regular';
`;
export {CustomText};

react-native 공식문서에서 권장하고 있는 CustomText 를 만들었다.

//기존
import {Text} from 'react-native'

//CustomText 사용
import {CustomText} from './CustomText'

하나하나 적용해야 한다는 것이 웹과 달라 조금 어색하지만 그런데로 잘 적용됐다