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


useBreakpointValue is a custom hook to returns the value for the current breakpoint based on the provided responsive values object. It is also responsive to window resizing and returning the appropriate value according to the new window size.


To use the useBreakpointValue in your project, import useBreakpointValue from @gluestack-ui/themed as demonstrated below.
import { useBreakpointValue } from "@gluestack-ui/themed"
const BreakPointValue = () => {
const flexDir = useBreakpointValue({
base: "column",
sm: "row",
return (
flexDirection: flexDir,
gap: 10,