React Native Notes – 005

In iOS, the "system red" is a different shade depending on whether you are in light mode or dark mode, and additionally if you are in an accessible mode (e.g. high contrast); that's four different values just for system red.

You can use a system color like so:

import {PlatformColor} from "react-native";

const red = PlatformColor("systemRed");
const placeholderColor =PlatformColor("placeholderText");
const background = PlatformColor("systemBackground");

What's really neat is that these colors will be in-sync with the user's device. If the sun sets, then the colors will change, and you don't even have to listen for it. The downside is that you have you use pre-defined Apple colors.

Having to use the platform's own colors is restrictive. If you're building for iOS then you can specify your own color set (see the docs):

import {DynamicColorIOS} from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
    dark: 'tomato',
    light: 'white',
});

const customContrastDynamicTextColor = DynamicColorIOS({
    dark: 'saddlebrown',
    light: 'azure',
    highContrastDark: 'black',
    highContrastLight: 'white',
});

As far as I know, there is not an equivalent for Android or Web so I guess the only solution there is to listen for dark mode changes, and to listen for a11y changes.