Using Theme | NativeBase | Universal Components for React and React Native

Playground
function ColorPalete() {
  const {
    colors
  } = useTheme();
  return <Box>
      <FlatList numColumns="5" data={Object.keys(colors["primary"])} renderItem={({
      item
    }) => <Box p="5" bg={`primary.${item}`} />} />
    </Box>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1} p="3">
        <ColorPalete />
      </Center>
    </NativeBaseProvider>;
}
function ColorPalete() {
  const {
    colors
  } = useTheme();
  return <Box>
      <FlatList numColumns="5" data={Object.keys(colors["primary"])} renderItem={({
      item
    }) => <Box p="5" bg={`primary.${item}`} />} />
    </Box>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1} p="3">
        <ColorPalete />
      </Center>
    </NativeBaseProvider>;
}

Playground
function Tokens() {
  const [contrastThreshold, darkText] = useToken("colors", ["contrastThreshold", "darkText"]);
  return <Center bg="primary.600" flexDirection="row" p="4" rounded="4">
      Contrast threshold is:{" "}
      <Text color={darkText} fontWeight="bold">
        {contrastThreshold}
      </Text>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Tokens />
      </Center>
    </NativeBaseProvider>;
}
function Tokens() {
  const [contrastThreshold, darkText] = useToken("colors", ["contrastThreshold", "darkText"]);
  return <Center bg="primary.600" flexDirection="row" p="4" rounded="4">
      Contrast threshold is:{" "}
      <Text color={darkText} fontWeight="bold">
        {contrastThreshold}
      </Text>
    </Center>;
} // Example template which wraps component with NativeBaseProvider


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

Playground
function UseContrastingTextHook() {
  const bgDark = "primary.600";
  const bgLight = "primary.200";
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <Stack space="4">
      <Button bg={bgDark} _text={{
      color: colorContrastDark
    }}>
        NativeBase
      </Button>
      <Button bg={bgLight} _text={{
      color: colorContrastLight
    }}>
        NativeBase
      </Button>
    </Stack>;
} // Example template which wraps component with NativeBaseProvider


function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseContrastingTextHook />
      </Center>
    </NativeBaseProvider>;
}
function UseContrastingTextHook() {
  const bgDark = "primary.600";
  const bgLight = "primary.200";
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <Stack space="4">
      <Button bg={bgDark} _text={{
      color: colorContrastDark
    }}>
        NativeBase
      </Button>
      <Button bg={bgLight} _text={{
      color: colorContrastLight
    }}>
        NativeBase
      </Button>
    </Stack>;
} // Example template which wraps component with NativeBaseProvider


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

Playground
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center flex="1" p="4" bg={colorMode === "dark" ? "coolGray.800" : "warmGray.50"}>
      <Text fontSize="lg" display="flex" mb="20">
        The active color mode is{" "}
        <Text bold fontSize="lg">
          {colorMode}
        </Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseColorMode />
      </Center>
    </NativeBaseProvider>;
}
function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center flex="1" p="4" bg={colorMode === "dark" ? "coolGray.800" : "warmGray.50"}>
      <Text fontSize="lg" display="flex" mb="20">
        The active color mode is{" "}
        <Text bold fontSize="lg">
          {colorMode}
        </Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
}

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

Playground
function UseColorMode() {
  const {
    toggleColorMode
  } = useColorMode();
  const backgroundColor = useColorModeValue("warmGray.50", "coolGray.800");
  const colorMode = useColorModeValue("Light", "Dark");
  return <Center flex={1} p="4" bg={backgroundColor}>
      <Text fontSize="lg" display="flex" mb="20">
        The active color mode is{" "}
        <Text bold fontSize="18px">
          {colorMode}
        </Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseColorMode />
      </Center>
    </NativeBaseProvider>;
}
function UseColorMode() {
  const {
    toggleColorMode
  } = useColorMode();
  const backgroundColor = useColorModeValue("warmGray.50", "coolGray.800");
  const colorMode = useColorModeValue("Light", "Dark");
  return <Center flex={1} p="4" bg={backgroundColor}>
      <Text fontSize="lg" display="flex" mb="20">
        The active color mode is{" "}
        <Text bold fontSize="18px">
          {colorMode}
        </Text>
      </Text>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </Center>;
}

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