iOS Color

Type-safe UIKit semantic colors under One.iOS.Color

One.iOS.Color names UIKit’s semantic colors with types. Each is a native PlatformColor, so it follows light mode, dark mode, and increased contrast without a React appearance subscription.

Reach for these anywhere a React Native style takes a color: text, fills, backgrounds, and separators that track the system palette. Any other UIKit color name works as a string key and reaches PlatformColor unchecked.

Usage

import { Text, View } from 'react-native'
import { One } from 'one'

function Hello() {
  return (
    <View style={{ backgroundColor: One.iOS.Color.secondarySystemBackground }}>
      <Text style={{ color: One.iOS.Color.label }}>Hello</Text>
    </View>
  )
}

Both colors resolve natively, so the view tracks appearance changes with no re-render.

How it works

One.iOS.Color is a proxy over PlatformColor. Every read passes its key straight through, so the typed names and arbitrary string keys like One.iOS.Color['tintColor'] behave the same. The value is a native color reference, not a hex string, which is why it follows the system palette for free.

Colors

Each name is a ColorValue.

Platform differences

On Android and web every color reads null. Pick a color per platform, or use Android Color on Android.

Limits and gotchas

• Off iOS every read is null. Guard with a platform check or a per-platform color; a null color is not a fallback.
• String keys are unchecked. Only the typed names are verified; any other key reaches PlatformColor as written.

Credit

The iOS color helpers are adapted from Expo Router.