[RN] 📝expo 폰트 변경하기 (ft. global-props)

▷ react-native expo 폰트 변경

⒈ ttf파일

구글 폰트에서 원하는 폰트를 다운로드 받아 ttf파일을 assets/fonts 파일 안에 넣어준다.

⒉ expo-font 설치

# 설치
npm install expo-font

⒊ 폰트 적용하기

폰트 로딩의 기본 사용법: Font.loadAsync({"폰트명": require("경로")});

폰트 로딩은 비동기 작업이기 때문에 렌더링이 시작된 후에도 폰트 로딩이 완료되지 않을 수 있다. 그러므로 useEffect 함수를 사용해서 폰트 로딩이 완료되면 로딩 상태를 true로 변경해줘야 한다. 이렇게 하면 폰트 로딩이 완료된 후에만 텍스트 스타일에 폰트를 적용할 수 있다.(안 해주면 오류 뜸)

import * as Font from 'expo-font';
import { useEffect, useState } from 'react';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        bubblegum: require('./src/assets/fonts/BubblegumSans-Regular.ttf'),
        notosans: require('./src/assets/fonts/NotoSansKR-VariableFont_wght.ttf'),
      });
      setFontsLoaded(true);
    }

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return null; // 폰트 로딩 중에는 렌더링을 방지
  }

  return (
    <SafeAreaView>
      // 적용 방법
      <Text style={{ fontFamily: 'notosans', fontSize: 28 }}>Font</Text>
      <Text style={{ fontFamily: 'bubblegum', fontSize: 28 }}>Font</Text>
    </SafeAreaView>
  );
}

▷ react-native-global-props

notosans 폰트를 모든 Text에 개별적으로 설정하는 대신, 전역으로 한 번만 설정하여 모든 텍스트에 일괄적으로 적용하고 싶었다.

그럴 땐 react-native-global-props 라이브러리를 사용하면 된다.

⒈ 설치

# 설치
npm i react-native-global-props --save
npm install --save-dev @types/react-native-global-props

⒉ setCustomText

setCustomText로 폰트를 적용

import { setCustomText } from 'react-native-global-props';

const customTextProps = {
  style: {
    fontFamily: 'notosans',
  },
};

setCustomText(customTextProps);

전체 코드

import * as Font from 'expo-font';
import { useEffect, useState } from 'react';
import { setCustomText } from 'react-native-global-props';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        bubblegum: require('./src/assets/fonts/BubblegumSans-Regular.ttf'),
        notosans: require('./src/assets/fonts/NotoSansKR-VariableFont_wght.ttf'),
      });
      setFontsLoaded(true);
    }

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return null; // 폰트 로딩 중에는 렌더링을 방지
  }

  const customTextProps = {
    style: {
      fontFamily: 'notosans',
    },
  };
  setCustomText(customTextProps);

  return (
    <SafeAreaView>
      <Text style={{ fontSize: 28 }}>Font</Text> // ⭐️fontFamily: 'notosans'를 해주지 않아도 적용됨
      <Text style={{ fontFamily: 'bubblegum', fontSize: 28 }}>Font</Text>
    </SafeAreaView>
  );
}