useStyled

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.

Import

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 (
<View
style={{
width: 100,
height: 100,
backgroundColor: styled.config.tokens.colors.primary500,
}}
/>
)
}
Edit this page on GitHub