useAccessibleColors | NativeBase

in the app. By default, accessible colors are off. This allows better color matching to the theme of the app. You can use this hook if you want to continue using 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(`emerald.${shade}`);
  return <Center>
      <Button colorScheme="emerald" key={`emerald.${shade}`} bg={`emerald.${shade}`} _text={{
      color: colorContrast
    }} mb={1}>
        Save
      </Button>
    </Center>;
};

const Example = () => {
  let [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <Center>
      <HStack space="3">
        {Object.keys(colors.yellow).map((key, index) => {
        if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
      })}
      </HStack>
      <HStack mt="6" space="3">
        <Text>Toggle Accessible Colors</Text>
        <Switch onToggle={toggleAccessibleColors} colorScheme="coolGray" />
      </HStack>
    </Center>;
};const ButtonTemplate = ({
  shade
}) => {
  const colorContrast = useContrastText(`emerald.${shade}`);
  return <Center>
      <Button colorScheme="emerald" key={`emerald.${shade}`} bg={`emerald.${shade}`} _text={{
      color: colorContrast
    }} mb={1}>
        Save
      </Button>
    </Center>;
};

const Example = () => {
  let [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <Center>
      <HStack space="3">
        {Object.keys(colors.yellow).map((key, index) => {
        if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
      })}
      </HStack>
      <HStack mt="6" space="3">
        <Text>Toggle Accessible Colors</Text>
        <Switch onToggle={toggleAccessibleColors} colorScheme="coolGray" />
      </HStack>
    </Center>;
};

Return value

Returns an array with values accessibleColors, setAccessibleColors, toggleAccessibleColors.

Quick Nav

useAccessibleColors | NativeBase | Universal Components for React and React Native