gluestack-ui-v5:components

Import gluestack equivalents from your local components directory, such as Box instead of View, Text instead of RN Text, and Pressable instead of TouchableOpacity. Style them with className utilities or built-in props rather than inline style objects.

Use built-in props when the component provides them, such as space on VStack/HStack, variant and size on Button, and size or bold on Text and Heading. Reserve className for layout utilities and styling that has no prop equivalent.

InputIcon must always be wrapped in an InputSlot inside the Input component, whether it appears on the left or right side. Using InputIcon directly as a child of Input breaks styling, positioning, and interaction handling.

First check for pre-built icons exported from components/ui/icon, then use Lucide icons via the Icon component's as prop if unavailable. For anything else, build a custom icon with the createIcon function and react-native-svg Path elements.

No, generic and numbered color tokens are prohibited. Use only semantic tokens such as bg-background, bg-card, bg-primary, text-foreground, text-muted-foreground, and border-border, with alpha modifiers like bg-primary/10 when needed.

Wrap your app in GluestackUIProvider, then use Appearance.setColorScheme with NativeWind v5 or Uniwind.setTheme with UniWind. The provider handles theme switching automatically for whichever styling engine your project uses.