Using Theme | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Using Theme
NativeBase provides multiple tools to use the central theme defined in the app. The first tool is , which you can use to access the values from the current theme.
useTheme
Playground
useToken
You can also get specific values from the theme with hook.
Playground
useContrastText
If you are defining the background yourself and want to pass a contrasting color to the text, then you can use .
Playground
useColorMode
If you want to define some conditionals based on current color mode or change the color mode, then you can try .
Playground
useColorModeValue
If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use hook. It takes two parameters, light mode value as the first and dark mode value as second.
Playground
Nativebase logo
MadeWithNativeBase