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.

This is especially important when using React Compiler, which can memoize components and skip re-renders unless useColorScheme() is called.

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