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


@gluestack-ui/themed components are responsive, once we pass the default config file imported from @gluestack-ui/config to GluestackUIProvider, where we have defined different breakpoints according to which styles can be applied.
Basic breakpoints defined in config imported from @gluestack-ui/config.
mediaQueries: {
base: '@media screen and (min-width: 0)',
sm: '@media screen and (min-width: 480px)',
md: '@media screen and (min-width: 768px)',
lg: '@media screen and (min-width: 992px)',
xl: '@media screen and (min-width: 1280px)',
We can apply different styling based on different breakpoints like done in below example. In the above example in the sx props we are defining different styles for different breakpoints.
<Box justifyContent="center" alignItems="center" h="100%">
<Text>This is a box</Text>
Expo snack link for the above example is provided here.
Caution: Utilizing the Passing Props feature within Media Queries is not supported.