UI 라이브러리 Tamagui를 설치합니다.

TamaGUI 적용법

1. tamagui 설치

1. npm 설치

npm install @tamagui/core
npm install tamagui

2. 루트 _layout.tsx 수정

최상위 루트에 있는 _layout.tsx를 다음과 같이 수정합니다.

import { TamaguiProvider } from '@tamagui/core';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';

export default function RootLayout() {
  
  const [loaded] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  });

  if (!loaded) {
    // Async font loading only occurs in development.
    return null;
  }

export default () => {
  return (
    <TamaguiProvider config={config}>
      {/* your app here */}
    </TamaguiProvider>
  )
}

3. tamagui config 설치

빠른 설정을 위해 @tamagui/config를 설치후 적용합니다.

npm install @tamagui/config

import { TamaguiProvider, createTamagui } from '@tamagui/core'
import { defaultConfig } from '@tamagui/config/v4'

export default () => {
  return (
    <TamaguiProvider config={config}>
      {/* your app here */}
    </TamaguiProvider>
  )
}

4. tamagui.config.ts 설정

최상위 디렉토리에 tamamgui.config.ts를 생성하고 아래 코드를 입력합니다.

import { defaultConfig } from '@tamagui/config/v4'
import { createTamagui } from '@tamagui/core'

export const config = createTamagui(defaultConfig)

type CustomConfig = typeof config

// ensure types work
declare module 'tamagui' {
  interface TamaguiCustomConfig extends CustomConfig {}
}

5. 루트 _layout.tsx 수정

import { TamaguiProvider } from '@tamagui/core';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import 'react-native-reanimated';
import config from '../tamagui.config';


export default function RootLayout() {
  
  const [loaded] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  });

  if (!loaded) {
    // Async font loading only occurs in development.
    return null;
  }

  return (
    <SafeAreaProvider>
      <TamaguiProvider config={config} defaultTheme={'light'}>
        <StatusBar style="auto" />
          <Stack>
            <Stack.Screen name="(main)/(tabs)" options={{ headerShown: true }} />
            <Stack.Screen name="+not-found" />
          </Stack>
      </TamaguiProvider>
    </SafeAreaProvider>
  );
}