Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

States

Styling of gluestack-ui components is achieved through the utilization of @gluestack-style/react, a resource that provides a range of capabilities for effectively controlling states like hover, active, focused, and others. You can pass config file from @gluestack-ui/config for default state styling. Config file exports an object which is passed inside the GluestackUIProvider. In this context, we will delve into how gluestack-style simplifies the management of these states and their associated styles.
Easiest way to change styling of states would be using sx prop which enables state management.
<Button
sx={{
":hover": {
backgroundColor: "$red500",
},
}}
>
<ButtonText>Hello world</ButtonText>
</Button>

We can define styles that can be applied on different states and pass them as an object in sx prop. For more details, checkout State Based Styles documentation.

Supported States are the following on basis of the component:

  • indeterminate
  • checked
  • readOnly
  • required
  • invalid
  • focus
  • focusVisible
  • hover
  • pressed
  • active
  • loading
  • disabled