useContrastText | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

useContrastText

useContrastText is a custom hook used to get a contrasting color (either lightText or darkText) to the color passed as a parameter.

Import

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

Examples

Basic


Playground
function UseContrastingTextHook() {
  const bgDark = 'gray.900';
  const bgLight = 'gray.50';
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <>
      <Button bg={bgDark} _text={{
      color: colorContrastDark
    }} my={6}>
        NativeBase
      </Button>
      <Button bg={bgLight} _text={{
      color: colorContrastLight
    }}>
        NativeBase
      </Button>
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseContrastingTextHook />
      </Center>
    </NativeBaseProvider>;
}function UseContrastingTextHook() {
  const bgDark = 'gray.900';
  const bgLight = 'gray.50';
  const colorContrastDark = useContrastText(bgDark);
  const colorContrastLight = useContrastText(bgLight);
  return <>
      <Button bg={bgDark} _text={{
      color: colorContrastDark
    }} my={6}>
        NativeBase
      </Button>
      <Button bg={bgLight} _text={{
      color: colorContrastLight
    }}>
        NativeBase
      </Button>
    </>;
}

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

Using Accessible Colors

By default, NativeBase provides contrasting colors based on its theme. You can also choose to get colors with better

color and contrast accessibility

with the help of

useAccessibleColors

hook.


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

Accepts and returns a color defined in the theme.

Quick Nav

Using Accessible Colors

Return value

MadeWithNativeBase

useContrastText | NativeBase | Universal Components for React and React Native