Expo (React Native)에서 폰트 적용 및 설정 방법

npx create-expo-app@latest MyFontApp
cd MyFontApp

npx expo install expo-font

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "android": {
            "fonts": [
              {
                "fontFamily": "Pretendard",
                "fontDefinitions": [
                  {
                    "path": "./assets/fonts/Pretendard-Regular.otf",
                    "weight": 400,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-Medium.otf",
                    "weight": 500,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-SemiBold.otf",
                    "weight": 600,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-Bold.otf",
                    "weight": 700,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-ExtraBold.otf",
                    "weight": 800,
                    "style": "normal"
                  }
                ]
              }
            ]
          },
          "ios": {
            "fonts": [
              "./assets/fonts/Pretendard-ExtraBold.otf",
              "./assets/fonts/Pretendard-SemiBold.otf",
              "./assets/fonts/Pretendard-Bold.otf",
              "./assets/fonts/Pretendard-Medium.otf",
              "./assets/fonts/Pretendard-Regular.otf"
            ]
          }
        }
      ]
    ]
  }
}

npx expo install expo-splash-screen

import { Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import * as SplashScreen from "expo-splash-screen";
 
// 이 부분은 앱이 로드될 때 스플래시 스크린을 자동으로 숨기지 않도록 설정합니다.
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  const [loaded, error] = useFonts({
    "Pretendard-ExtraBold": require("../assets/fonts/Pretendard-ExtraBold.otf"),
    "Pretendard-Bold": require("../assets/fonts/Pretendard-Bold.otf"),
    "Pretendard-SemiBold": require("../assets/fonts/Pretendard-SemiBold.otf"),
    "Pretendard-Medium": require("../assets/fonts/Pretendard-Medium.otf"),
    "Pretendard-Regular": require("../assets/fonts/Pretendard-Regular.otf"),
  });
 
  useEffect(() => {
    if (loaded || error) {
      // 폰트가 로드되었거나 에러가 발생하면 스플래시 스크린을 숨깁니다.
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);
 
  if (!loaded && !error) {
    return null;
  }
 
  return {
    //   ... 기타 설정 ...
  };
}

import { Text, View } from "react-native";
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontFamily: "Pretendard-Bold", fontSize: 24 }}>
        Hello, Expo with Custom Font!
      </Text>
    </View>
  );
}

import { StyleSheet, Text, type TextProps } from "react-native";
 
// 폰트 weight 타입 정의
type Weight = "regular" | "medium" | "semibold" | "bold" | "extrabold";
 
const fontMap: Record<Weight, string> = {
  regular: "Pretendard-Regular",
  medium: "Pretendard-Medium",
  semibold: "Pretendard-SemiBold",
  bold: "Pretendard-Bold",
  extrabold: "Pretendard-ExtraBold",
};
 
export function AppText({
  style,
  weight = "regular",
  ...props
}: TextProps & { weight?: Weight }) {
  return (
    <Text
      {...props}
      style={[
        styles.base,
        { fontFamily: fontMap[weight], fontWeight: "normal" },
        style,
      ]}
    />
  );
}
 
const styles = StyleSheet.create({
  base: {
    // 공통 텍스트 스타일 있으면 여기 추가
  },
});

import { View } from "react-native";
import { AppText } from "../components/AppText";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <AppText weight="bold" style={{ fontSize: 24 }}>
        Hello, Expo with Custom Font!
      </AppText>
    </View>
  );
}