gluestack-ui-v4:components

Compound components in gluestack-ui v4 require using specific sub-components for elements like Input, Button, Card, and FormControl to ensure proper composition. You must enforce required sub-components and verify their structure against official documentation for reliable UI composition.

The correct provider setup for gluestack-ui v4 involves wrapping your entire application with GluestackUIProvider. This enables theming and core functionality across all components, ensuring consistent styling tokens and reliable UI behavior throughout your React Native app.

To map props to styling tokens in gluestack-ui v4, prefer using Gluestack components over native React Native primitives. This approach enforces consistent usage and aligns your UI with the design system by automatically mapping component props to predefined styling tokens.

Using React Native primitives instead of gluestack-ui v4 components is discouraged. You should prefer Gluestack components to ensure consistent usage, safer customization, and proper alignment with the design system's styling tokens and compound component patterns.

Icon usage in gluestack-ui v4 requires proper provider practices. You must wrap your app with GluestackUIProvider to enable theming and functionality, which ensures icons and other components render correctly and consistently across your React Native application.

gluestack-ui v4 component composition fails when required sub-components are missing or improperly structured. Ensure you are using the correct compound patterns for elements like Input, Button, and FormControl, and verify your implementation against the official documentation.