Guide for building cross-platform React Native and Expo applications with Tamagui. Use this skill when implementing UI components, styling, theming, responsive design, or animations with Tamagui. Applies to tasks involving styled(), tokens, themes, media queries, variants, or TamaguiProvider setup.
Tamagui is a universal UI library for React Native and Expo that provides 100% parity between web and native with an optimizing compiler. This skill covers core styling, theming, and component patterns.
bunx create-expo-app@latest my-app -t expo-template-blank-typescript
cd my-app
bun add tamagui @tamagui/config
Create tamagui.config.ts at the project root:
import { config } from '@tamagui/config/v4'
import { createTamagui } from 'tamagui'
export const tamaguiConfig = createTamagui(config)
export default tamaguiConfig
export type Conf = typeof tamaguiConfig
declare module 'tamagui' {
interface TamaguiCustomConfig extends Conf {}
}
Wrap the app root with TamaguiProvider:
import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from './tamagui.config'
export default function App() {
return (
<TamaguiProvider config={tamaguiConfig} defaultTheme="light">
{/* App content */}
</TamaguiProvider>
)
}
Update babel.config.js for compiler optimization:
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',
},
],
],
}
}
The styled() function creates typed, optimized components:
import { View, Text, styled } from 'tamagui'
export const Card = styled(View, {
backgroundColor: '$background',
borderRadius: '$4',
padding: '$4',
variants: {
elevated: {
true: {
shadowColor: '$shadowColor',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 3,
},
},
size: {
small: { padding: '$2' },
medium: { padding: '$4' },
large: { padding: '$6' },
},
} as const,
defaultVariants: {
size: 'medium',
},
})
Boolean variants use true/false keys: