tamagui-best-practiceslisted

# Tamagui Best Practices Tamagui v1.x patterns beyond fundamentals: Config v4, compiler optimization, compound components, and gotchas. ## Reference Files — Read Before Writing Code | Context | File | What it covers | |---------|------|----------------| | Dialog, Sheet, modal overlays | @DIALOG_PATTERNS.md | Adapt component, accessibility | | Form, Input, Label, validation | @FORM_PATTERNS.md | zod integration | | Animations, transitions | @ANIMATION_PATTERNS.md | drivers, enterStyle/exitStyle | | Popover, Tooltip, Select | @OVERLAY_PATTERNS.md | overlay primitives | | Compiler optimization | @COMPILER_PATTERNS.md | what the compiler can/cannot flatten | | Design tokens, theming | @DESIGN_SYSTEM.md | palette, token structure | ## Config v4 Minimal setup with `@tamagui/config/v4`. Add `styleCompat: 'react-native'` for new projects to align `flexBasis` with React Native behavior: ```tsx import { defaultConfig } from '@tamagui/config/v4' import { createTamagui } from 'tamagui' export const config = createTamagui({ ...defaultConfig, settings: { ...defaultConfig.settings, styleCompat: 'react-native' }, }) declare module 'tamagui' { interface TamaguiCustomConfig extends typeof config {} } ``` For custom themes use `createThemes` with `palette`/`accent`/`childrenThemes` — see @DESIGN_SYSTEM.md. ## Compiler Optimization Rules - Use `styled()` variants instead of inline conditionals — dynamic values break flattening. - Avoid `style={{ ... }}` with variables; use varia