[React Native] default font styling

global scope에서 적용되는 default font style을 적용하는 방법입니다.
(제가 하는 프로젝트에선 default 값으로 fontFamily만 적용했지만 다른 styling도 적용가능.)

먼저 react-native-global-props 라이브러리 안에 있는 setCustomText 라는 함수를 사용했다.

// App.tsx

import { setCustomText } from "react-native-global-props"

const customTextProps = {
  style: {
    fontFamily: "NotoSansKR-Regular",
  },
}

setCustomText(customTextProps)

작업 중인 디렉토리의 최상단 디렉토리(제 경우는 App.tsx )에서 1) react-native-global-props 안의 setCustomText 함수를 import 하고, 2) customTextProps 라는 객체를 생성해주고(이 안에 default font style을 작성해줍니다.), 3) setCustomText(customTextProps) 를 통해 default font style을 불러옵니다.

이렇게 시도하면 전역 레벨에서 default font style이 적용되는 것을 볼 수 있습니다.
그렇지만 리넥은 쉽지 않기 때문에 새로운 에러를 발견합니다 ㅠ.

위와 같이 시도했는데 iOS에서는 fontFamily가 성공적으로 적용되지만 android에서는 몇몇 Text 들만 적용되는 에러가 발생함.

그래서 결국 리넥 공홈에서 추천하는 방법인 Text 자체를 하나의 컴포넌트로 바꾸고 다른 파일에서 import {CustomText} from "TEXT COMPONENT 위치" 와 같이 불러와서 사용하는 방식으로 수정했다.

// text.tsx
import React from "react"
import { StyleSheet, Text } from "react-native"

export function defaultFontText(props) {
  return <Text style={[styles.defaultFontText, props.style]}>{props.children}</Text>
}

const styles = StyleSheet.create({
  defaultFontText: {
    fontFamily: "NotoSansKR-Regular",
  },
})

// 기존의 Text 컴포넌트를 사용하는 모든 파일
import { defaultFontText as Text } from "../../components/text/text"

text.tsx 에서 defaultFontText 라는 이름으로 export 했으니 그 이름 그대로 import 해도 되지만 그 뒤에 as XXX 라고 붙이면 그 파일 안에서는 XXX 라는 이름으로 defaultFontText 컴포넌트를 사용할 수 있음.

위와 같은 방법으로 작업했더니 android에서도 default font style들이 잘 적용되는 것을 확인함.

그렇지만 font styling에 관련한 적용은 되는데 상속이랑 폰트 자체의 lineHeight 등에서 기존에 작업한 코드들과 렌더링되는 부분에서 차이가 발생한다.
그래서 2번째 방법으로 default font style 적용하게 된다면 다시 레이아웃 수정해야할 것 같다..

참고 링크

https://www.npmjs.com/package/react-native-global-font

https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

https://stackoverflow.com/questions/35255645/how-to-set-default-font-family-in-react-native

https://stackoverflow.com/questions/51023593/is-there-a-way-to-set-a-font-globally-in-react-native