Еxpo 52 + Tamagui. Настраиваем проект с нуля

Важное замечание: данный гайд был создан для версии Expo 52 и для tamgui 1.120 и может не работать если вы используете другие версии.

На данные момент инструкция с сайта tamagui позволяет установить связку expo+tamagui+expo router через темплейт в котором используется expo 50, а текущая версию expo — 52. Из-за этого, когда я сделал все как по инструкции, я не смог открыть приложение через Expo Go (потому что Expo Go требует Expo 52). Т к для меня это было важно я решил попробовать создать проект на Expo с нуля и потом накатить на него tamagui. Далее поэтапно показываю что я сделал:

• создаем проект на Expo через: npx create-expo-app@latest

• заходим в проект и устанавливаем все UI компоненты (full UI kit) из tamagui: npm install tamagui (это опционально т к можно устанавливать каждый компонент отдельно и для прода точно не самая хорошая идея)Если вы попробуете запустить приложение через npm start, то никаких ошибок быть не должно. Однако, если открыть приложение через Expo Go, то будет ошибка. Чтобы это пофиксить надо сделать следующие шаги:

  1. устанавливаем конфиг для tamagui: npm install @tamagui/config

  2. создаем файл в корне проекта с названием “tamagui.config.ts”. В этот файл вставляем такой код для инициализации tamagui:

import { config } from '@tamagui/config/v3'
import { createTamagui } from 'tamagui'

export const tamaguiConfig = createTamagui(config)

export default tamaguiConfig

export type Conf = typeof tamaguiConfig

declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

3. Идем в корневой файл app/_layout.tsx и оборачиваем все в TamaguiProvider (это компонент который отвечает за работу с темами, корректную работу компонентов библиотеки и др.)

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 
    // add this
    <TamaguiProvider config={tamaguiConfig} defaultTheme={colorScheme!}>
      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="index" />
        </Stack>
      </ThemeProvider>
    </TamaguiProvider>
  )
}

Теперь у вас не должно быть ошибок при открытии приложения через Expo Go.

Настройка закончена.