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
const ButtonTemplate = ({
  shade
}) => {
  const colorContrast = useContrastText(`yellow.${shade}`);
  return <Button colorScheme="yellow" key={`yellow.${shade}`} bg={`yellow.${shade}`} _text={{
    color: colorContrast
  }} mb={1}>
      Save Changes
    </Button>;
};

const Example = () => {
  let [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <>
      {Object.keys(colors.yellow).map((key, index) => {
      if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
    })}
      <Button mt="10" onPress={toggleAccessibleColors} colorScheme="primary">
        Toggle Accessible Colors
      </Button>
    </>;
};const ButtonTemplate = ({
  shade
}) => {
  const colorContrast = useContrastText(`yellow.${shade}`);
  return <Button colorScheme="yellow" key={`yellow.${shade}`} bg={`yellow.${shade}`} _text={{
    color: colorContrast
  }} mb={1}>
      Save Changes
    </Button>;
};

const Example = () => {
  let [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <>
      {Object.keys(colors.yellow).map((key, index) => {
      if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
    })}
      <Button mt="10" onPress={toggleAccessibleColors} colorScheme="primary">
        Toggle Accessible Colors
      </Button>
    </>;
};

Return value

Returns an array with values accessibleColors, setAccessibleColors, toggleAccessibleColors.

Quick Nav

useAccessibleColors | NativeBase | Universal Components for React and React Native