Color

The Color API provides type-safe access to platform-specific colors on Android and iOS. It wraps React Native's PlatformColor with full TypeScript support, enabling autocomplete and compile-time type checking for system colors.

Usage

import { Color } from 'expo-router';

The Color object has two platform-specific namespaces:

Color.android.* - Android colors including base colors, attributes, and Material Design 3 colors
Color.ios.* - iOS system colors from UIKit

iOS colors

Access iOS system colors through Color.ios.*. These map directly to UIKit's standard colors and UI element colors.

import { Color } from 'expo-router';
import { View, Text } from 'react-native';

function MyComponent() {
  return (
    <View style={{ backgroundColor: Color.ios.systemBackground }}>
      <Text style={{ color: Color.ios.label }}>Hello, World!</Text>
    </View>
  );
}

iOS colors automatically adapt to the system appearance (light/dark mode) and accessibility settings.

Cross-platform usage

The Color API is platform-specific. Use Platform.select to select the appropriate color for each platform:

import { Platform, View, Text } from 'react-native';
import { Color } from 'expo-router';

function MyComponent() {
  const backgroundColor = Platform.select({
    ios: Color.ios.systemBackground,
    android: Color.android.dynamic.surface,
    default: '#000000',
  });

  const textColor = Platform.select({
    ios: Color.ios.label,
    android: Color.android.dynamic.onSurface,
    default: '#FFFFFF',
  });

  return (
    <View style={{ backgroundColor }}>
      <Text style={{ color: textColor }}>Hello, World!</Text>
    </View>
  );
}

API reference

Color API reference — For the full list of available types and colors, see Expo Router's Color API reference.

API reference

The Color API provides access to platform-specific native colors.

See the Expo Router reference for installation and configuration.

Usage

import { Color } from 'expo-router';
import { Text, View, useColorScheme } from 'react-native';

export default function MyComponent() {
  useColorScheme();
  return (
    <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
      <Text style={{ color: Color.ios.label }}>Hello</Text>
    </View>
  );
}

API

import { Color } from 'expo-router';

Constants

`Color.Color`

Type: ColorType

Color utility to access platform-specific colors easily.

System colors, as a type-safe wrapper over PlatformColor. For example, Color.android.background.
Attribute colors, as a type-safe wrapper over PlatformColor. For example, Color.android.attr.colorPrimary.
Material Design 3 static colors. For example, Color.android.material.primary.
Material Design 3 dynamic colors. For example, Color.android.dynamic.primary.

On iOS, it is a type-safe wrapper over PlatformColor, providing access to system colors. For example, Color.ios.label.

Example

import { Color } from 'expo-router';

Color.ios.label; // Access iOS system color
Color.android.background; // Access Android system color
Color.android.attr.colorPrimary; // Access Android attribute color
Color.android.material.primary; // Access Android Material Design 3 static color
Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color

Example

import { Color } from 'expo-router';
import { View, Text, useColorScheme } from 'react-native';

export default function MyComponent() {
  useColorScheme(); // Ensure the app responds to system theme changes
  return (
    <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
      <Text style={{ color: Color.android.dynamic.onPrimary }}>
        Hello, World!
      </Text>
    </View>
  );
}

Interfaces

`ColorType`

Property	Type	Description
ios	IOSBaseColor & undefined	-

`IOSBaseColor`

Property	Type	Description
darkText	ColorValue	PlatformColor("darkText")
label	ColorValue	PlatformColor("label")
lightText	ColorValue	PlatformColor("lightText")
link	ColorValue	PlatformColor("link")
opaqueSeparator	ColorValue	PlatformColor("opaqueSeparator")
placeholderText	ColorValue	PlatformColor("placeholderText")
quaternaryLabel	ColorValue	PlatformColor("quaternaryLabel")
quaternarySystemFill	ColorValue	PlatformColor("quaternarySystemFill")
secondaryLabel	ColorValue	PlatformColor("secondaryLabel")
secondarySystemBackground	ColorValue	PlatformColor("secondarySystemBackground")
secondarySystemFill	ColorValue	PlatformColor("secondarySystemFill")
secondarySystemGroupedBackground	ColorValue	PlatformColor("secondarySystemGroupedBackground")
separator	ColorValue	PlatformColor("separator")
systemBackground	ColorValue	PlatformColor("systemBackground")
systemBlue	ColorValue	PlatformColor("systemBlue")
systemBrown	ColorValue	PlatformColor("systemBrown")
systemCyan	ColorValue	PlatformColor("systemCyan")
systemFill	ColorValue	PlatformColor("systemFill")
systemGray	ColorValue	PlatformColor("systemGray")
systemGray2	ColorValue	PlatformColor("systemGray2")
systemGray3	ColorValue	PlatformColor("systemGray3")
systemGray4	ColorValue	PlatformColor("systemGray4")
systemGray5	ColorValue	PlatformColor("systemGray5")
systemGray6	ColorValue	PlatformColor("systemGray6")
systemGreen	ColorValue	PlatformColor("systemGreen")
systemGroupedBackground	ColorValue	PlatformColor("systemGroupedBackground")
systemIndigo	ColorValue	PlatformColor("systemIndigo")
systemMint	ColorValue	PlatformColor("systemMint")
systemOrange	ColorValue	PlatformColor("systemOrange")
systemPink	ColorValue	PlatformColor("systemPink")
systemPurple	ColorValue	PlatformColor("systemPurple")
systemRed	ColorValue	PlatformColor("systemRed")
systemTeal	ColorValue	PlatformColor("systemTeal")
systemYellow	ColorValue	PlatformColor("systemYellow")
tertiaryLabel	ColorValue	PlatformColor("tertiaryLabel")
tertiarySystemBackground	ColorValue	PlatformColor("tertiarySystemBackground")
tertiarySystemFill	ColorValue	PlatformColor("tertiarySystemFill")
tertiarySystemGroupedBackground	ColorValue	PlatformColor("tertiarySystemGroupedBackground")

Types

Sources

The original Expo docs for this page:

Color (source-of-truth/router/reference/color.md)
Router Color (source-of-truth/versions/v57.0.0/sdk/router/color.md)

On this page