useToken | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.

Explore gluestack-ui

Know More

useToken

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

Import

Copy
import { useToken } from 'native-base';

Example


Playground
function UseTokenHookExample() {
  const [warning1, red2] = useToken( // the key within the theme, in this case `theme.colors`
  'colors', // the subkey(s), resolving to `theme.colors.warning.1`
  ['emerald.200', 'red.400'] // a single fallback or fallback array matching the length of the previous arg
  );
  return <Box bg={warning1}>
      <Text color={red2}>wonderful gradients</Text>
    </Box>;
}

function Example() {
  return <Center flex={1}>
      <UseTokenHookExample />
    </Center>;
}function UseTokenHookExample() {
  const [warning1, red2] = useToken( // the key within the theme, in this case `theme.colors`
  'colors', // the subkey(s), resolving to `theme.colors.warning.1`
  ['emerald.200', 'red.400'] // a single fallback or fallback array matching the length of the previous arg
  );
  return <Box bg={warning1}>
      <Text color={red2}>wonderful gradients</Text>
    </Box>;
}

function Example() {
  return <Center flex={1}>
      <UseTokenHookExample />
    </Center>;
}

Quick Nav

useToken | NativeBase | Universal Components for React and React Native