Configure your Breakpoints

To configure breakpoints in @gluestack-style/react, create a gluestack-style.config.js file to define your breakpoints along with other configuration settings. Breakpoints are defined within the mediaQueries scale.

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)',
},

To use breakpoints

const MyButton = styled(Pressable, {
  bg: "$red500",
  p: "$3",
  shadow: "$4",
  "@md": {
    bg: "$blue500",
    ":hover": {
      bg: "$green500",
      ":focus": {
        bg: "purple",
      },
    },
    _dark: {
      bg: "$red500",
    },
    _light: {
      bg: "$blue500",
    },
  },
})

Edit this page on GitHub