useToken

useToken is a custom hook to resolves design tokens from the theme.

Import

To use the useToken in your project, import useToken from @gluestack-style/react. as Demonstrated below.

import { useToken } from "@gluestack-style/react"

Let's use our useToken value to give background color to View from react-native.

import { View } from "react-native"
import { useToken } from "@gluestack-style/react"

function Example() {
  const resolvedGreen = useToken("colors", "green500")
  return (
    <View
      style={{
        width: 100,
        height: 100,
        backgroundColor: resolvedGreen,
      }}
    />
  )
}

Edit this page on GitHub