useAccessibleColors | NativeBase

in the app. By default, accessible colors are off. 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 = () => {
  const [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <Center>
      <Stack space="3" direction={["column", "row"]}>
        {Object.keys(colors.yellow).map((key, index) => {
        if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
      })}
      </Stack>
      <HStack mt="6" space="3">
        <Text>Toggle Accessible Colors</Text>
        <Switch onValueChange={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 = () => {
  const [,, toggleAccessibleColors] = useAccessibleColors();
  const {
    colors
  } = useTheme();
  return <Center>
      <Stack space="3" direction={["column", "row"]}>
        {Object.keys(colors.yellow).map((key, index) => {
        if (index > 2 && index < 9) return <ButtonTemplate shade={key} />;
      })}
      </Stack>
      <HStack mt="6" space="3">
        <Text>Toggle Accessible Colors</Text>
        <Switch onValueChange={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