Expo 에서 Tamagui 사용하기

새로운 Expo 프로젝트를 시작하기 위해서 UI 라이브러리를 찾아보던 중 Tamagui 를 알게 되었습니다. Expo 앱에서 Tamagui 를 셋팅하는 방법을 단계별로 정리힙니다.

새로운 템플릿 프로젝트 생성

Tamagui 를 Expo 에서 사용하기 위한 공식 템플릿이 있습니다. 이 템플릿은 Yanr 4.4.0 이상을 사용합니다. yarn 을 사용한다면 다음 명령어를 사용해 최신 안정화 버전으로 업그레이드 합니다.

yarn set version stable

사용하는 패키지 매니저에 맞게 cli 를 입력해, Tamagui 템플릿을 사용하는 Expo 프로젝틀 생성합니다.

pnpm create tamagui@latest --template expo-router

Manual 셋팅

템플릿을 사용하지 않고 설정하는 방법을 설명합니다. 먼저, Typescript 를 사용하는 Expo 프로젝트를 생성합니다.

pnpm dlx create-expo-app -t expo-template-blank-typescript

Tamagui 플로그인 및 Babel 설정

Tamagui 의 플러그인을 설치하고, babel.config.js 에 추가합니다.

pnpm install @tamagui/babel-plugin

babel.config.js 에 플러그인을 셋팅합니다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "@tamagui/babel-plugin",
        {
          components: ["tamagui"],
          config: "./tamagui.config.ts",
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === "development",
        },
      ],
      "react-native-reanimated/plugin", // reanimated 사용 시
    ],
  };
};

테마 관리

테마를 관리하기 위해서 TamaguiProvider 를 적용합니다. app/_layout.tsx

import "../tamagui-web.css";
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { Stack } from "expo-router";
import { useColorScheme } from "react-native";
import { TamaguiProvider } from "tamagui";
import { tamaguiConfig } from "../tamagui.config";
 
export default function RootLayout() {
  const colorScheme = useColorScheme();
 
  return (
    <TamaguiProvider config={tamaguiConfig} defaultTheme={colorScheme!}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
        </Stack>
      </ThemeProvider>
    </TamaguiProvider>
  );
}

첫 실행 시 캐시 클리어

처음 프로젝트를 실행할 때는 캐시가 있을 수 있습니다. 캐시를 클리어 하면서 실행시킵니다.

pnpm dlx expo start -c

출처

Tamagui 공식문서