Responsive Styles

gluestack-style supports responsive styles using media queries.

Configure Your breakpoints

To configure breakpoints with @gluestack-style/react, create a gluestack-style.config.js file and define your breakpoints and other configuration options there."

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

Using breakpoints in styled function

Once configured, you can apply different styles at different breakpoints.

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$red500",
    p: "$3",
    shadow: "$4",
    ":hover": {
      bg: "$red600",
    },
    ":active": {
      bg: "$red700",
    },
    "@md": {
      bg: "$blue500",
      ":hover": {
        bg: "$blue600",
      },
      ":active": {
        bg: "$blue700",
      },
    },
  })
  const StyledButtonText = styled(Text, {
    color: "$textDark50",
  })
  const [isHovered, setIsHovered] = useState(false)
  const [isActive, setIsActive] = useState(false)
  return (
    <Provider config={config}>
      <StyledButton
        states={{ hover: isHovered, active: isActive }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseDown={() => setIsActive(true)}
        onMouseUp={() => setIsActive(false)}
      >
        <StyledButtonText>Click Me</StyledButtonText>
      </StyledButton>
    </Provider>
  )
}

Note that the '@' symbol indicates a media query.The '@' symbol should be followed by the name of the desired breakpoint for the styles.

Note that the same API can be used with the sx prop to override styles inline.

Caution: Utilizing the Passing Props feature within Media Queries is not supported.