useContrastText | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.
Explore gluestack-ui
useContrastText
useContrastText is a custom hook that provides color contrast text color (either lightText or darkText) against the background color that is passed as a parameter.
Import
Copy
import { useContrastText } from "native-base";
Examples
Basic
Playground
Using Accessible Colors
By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better with the help of hook.
Playground
Return value
Accepts a background color and returns a text color that maintains the contrast ratio for better accessibility.
Nativebase logo
MadeWithNativeBase