Color

Access platform-specific colors with type safety in Expo Router.

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

Android colors

Android provides four categories of colors through the Color.android namespace.

Base colors

Access Android system colors through Color.android.*. These map to @android:color/ resources.

import { Color } from 'expo-router';

// Basic colors
Color.android.black;
Color.android.white;
Color.android.transparent;

// Background colors
Color.android.background_dark;
Color.android.background_light;

See the Android R.color documentation for the full list of available colors.

Attribute colors

Access Android theme attributes through Color.android.attr.*. These resolve colors from the current theme using ?attr/ syntax.

import { Color } from 'expo-router';

// Theme colors
Color.android.attr.colorPrimary;
Color.android.attr.colorSecondary;
Color.android.attr.colorAccent;
Color.android.attr.colorBackground;

See the Android R.attr documentation for more information.

Material Design 3 static colors

Access Material Design 3 static colors through Color.android.material.*. These use the standard Material 3 Light/Dark theme colors.

import { Color } from 'expo-router';

// Primary colors
Color.android.material.primary;
Color.android.material.onPrimary;
Color.android.material.primaryContainer;
Color.android.material.onPrimaryContainer;

// Surface colors
Color.android.material.surface;
Color.android.material.onSurface;

See the Material Design 3 color roles documentation for more information about each color role.

Material Design 3 dynamic colors

Access Material Design 3 dynamic colors through Color.android.dynamic.*. Dynamic colors adapt to the user's wallpaper using Android's Dynamic Color feature, available on Android 12+ (API 31+).

import { Color } from 'expo-router';

// Dynamic colors adapt to user's wallpaper
Color.android.dynamic.primary;
Color.android.dynamic.onPrimary;
Color.android.dynamic.surface;
Color.android.dynamic.onSurface;

The available colors are the same as Material 3 static colors.

Responding to theme changes on Android

Android Material colors (both static and dynamic) respond to the system's light/dark mode. To ensure your component re-renders when the theme changes, use the useColorScheme() hook from React Native.

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

function MyComponent() {
  // Triggers re-render when system theme changes
  useColorScheme();

  return (
    <View style={{ backgroundColor: Color.android.dynamic.surface }}>
      <Text style={{ color: Color.android.dynamic.onSurface }}>Hello, World!</Text>
    </View>
  );
}

Without using useColorScheme(), the colors may not update when the user switches between light and dark mode.

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 useMemo 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