useAccessibleColors | NativeBase

in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use accessible text colors. You can also pass it in the config for

NativeBaseProvider

with

extendTheme

Import

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

Example


Playground
function UseContrastingTextHook() {
  let [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <>
      {Object.keys(colors.teal).map(key => {
      const colorContrast = useContrastText(`teal.${key}`);
      return <Button key={`teal.${key}`} bg={`teal.${key}`} _text={{
        color: colorContrast
      }} mb={1}>
            NativeBase
          </Button>;
    })}
      <Button mt={2} onPress={toggleAccessibleColors} bg={'indigo.600'}>
        Toggle Accessible Colors
      </Button>
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseContrastingTextHook />
      </Center>
    </NativeBaseProvider>;
}function UseContrastingTextHook() {
  let [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <>
      {Object.keys(colors.teal).map(key => {
      const colorContrast = useContrastText(`teal.${key}`);
      return <Button key={`teal.${key}`} bg={`teal.${key}`} _text={{
        color: colorContrast
      }} mb={1}>
            NativeBase
          </Button>;
    })}
      <Button mt={2} onPress={toggleAccessibleColors} bg={'indigo.600'}>
        Toggle Accessible Colors
      </Button>
    </>;
}

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

Return value

Returns an array with values accessibleColors, setAccessibleColors, toggleAccessibleColors.

Quick Nav

useAccessibleColors | NativeBase | Universal Components for React and React Native