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

Responsive

@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%">
<Box
$base-bg="$red500"
$md-bg="$green500"
$lg-bg="$blue500"
alignItems="center"
>
<Text>This is a box</Text>
</Box>
</Box>
Expo snack link for the above example is provided here.
Caution: Utilizing the Passing Props feature within Media Queries is not supported.