Looking for documentation on gluestack-ui v2 with NativeWind? Refer to this link.

useMedia

useMedia is a custom hook that returns the breakpoints object with boolean value if your current screen size is a particular breakpoint or not. It is also responsive to window resizing and returning the appropriate value according to the new window size.

Import

To use the useMedia in your project, import useMedia from @gluestack-ui/themed. as Demonstrated below.

import { useMedia } from "@gluestack-ui/themed"

const MediaExample = () => {
  const media = useMedia()

  return (
    <View
      style={{
        flexDirection: media.lg ? "row" : "column",
        gap: 10,
      }}
    >
      <StyledBox>
        <StyledText>Universal</StyledText>
      </StyledBox>
      <StyledBox>
        <StyledText>Performant</StyledText>
      </StyledBox>
      <StyledBox>
        <StyledText>Accessible</StyledText>
      </StyledBox>
    </View>
  )
}