useStyled is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components.


To use the useStyled in your project, import useStyled from @gluestack-ui/themed as demonstrated below.
import { useStyled } from "@gluestack-ui/themed"
Let's use our useStyled value to give background color to View from react-native.
import { View } from "react-native"
import { useStyled } from "@gluestack-ui/themed"
const Example = () => {
const styled = useStyled()
return (
width: 100,
height: 100,
backgroundColor: styled.config.tokens.colors.primary500,
Edit this page on GitHub