Looking for documentation on gluestack-ui v2 with NativeWind? 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.