This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Material Colors

Read the Material 3 color palette (including Material 3 Dynamic Colors) from JavaScript.

Android

Included in Expo Go

@expo/ui/jetpack-compose exposes the Material 3 color palette used by Jetpack Compose so you can pick a palette source and have every component under a <Host> theme from it consistently.

The palette source depends on the options you pass:

Wallpaper-derived: Default on Android 12+ when no seedColor is given. Uses Material 3 Dynamic Colors (Material You).
Static Material 3 baseline: Default fallback on Android 11 and below when no seedColor is given.
Seeded from a color: When you pass a seedColor, the full palette is derived using the same algorithm that Material 3 Dynamic Colors use for wallpaper-based colors. Works on every Android API level and is independent of the wallpaper.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Theming `<Host>` from a seed color

Host accepts seedColor and colorScheme props directly. This is the recommended way to theme a Compose subtree. Native Compose components under this Host render with the seeded palette and any descendant that calls useMaterialColors() without arguments receives the same palette from the Host's context.

BrandedHostExample.tsx

import { Button, Host, Text } from '@expo/ui/jetpack-compose';

export default function BrandedHostExample() {
  return (
    <Host seedColor="#8E24AA" colorScheme="dark" style={{ flex: 1 }}>
      <Button onClick={() => {}}>
        <Text>Themed from the seed</Text>
      </Button>
    </Host>
  );
}

Reading the current palette inside Host

Call useMaterialColors() without arguments inside a <Host> to read the Host's current palette. The hook returns a reference-stable MaterialColors object and does not cross the native bridge on re-renders.

MaterialColorsExample.tsx

import { Column, Host, Text, useMaterialColors } from '@expo/ui/jetpack-compose';
import { padding } from '@expo/ui/jetpack-compose/modifiers';

export default function MaterialColorsExample() {
  return (
    <Host style={{ flex: 1 }}>
      <PaletteInspector />
    </Host>
  );
}

function PaletteInspector() {
  const colors = useMaterialColors();
  return (
    <Column modifiers={[padding(16, 16, 16, 16)]} verticalArrangement={{ spacedBy: 8 }}>
      <Text>Primary: {colors.primary}</Text>
      <Text>Surface: {colors.surface}</Text>
    </Column>
  );
}

Computing a specific palette with arguments

Pass arguments to useMaterialColors() to compute a palette on demand, even outside a <Host>. The scheme takes 'light' or 'dark', you can omit it to follow the system.

UseMaterialColorsExample.tsx

import { Column, Host, Text, useMaterialColors } from '@expo/ui/jetpack-compose';
import { padding } from '@expo/ui/jetpack-compose/modifiers';

export default function UseMaterialColorsExample() {
  const dark = useMaterialColors({ scheme: 'dark' });
  const brand = useMaterialColors({ seedColor: '#8E24AA' });
  const brandedDark = useMaterialColors({ scheme: 'dark', seedColor: '#8E24AA' });

  return (
    <Host style={{ flex: 1 }}>
      <Column modifiers={[padding(16, 16, 16, 16)]} verticalArrangement={{ spacedBy: 8 }}>
        <Text>Dark primary: {dark.primary}</Text>
        <Text>Brand primary: {brand.primary}</Text>
        <Text>Branded dark primary: {brandedDark.primary}</Text>
      </Column>
    </Host>
  );
}

Reading colors outside React components

GetMaterialColorsExample.tsx

import { getMaterialColors, isDynamicColorAvailable } from '@expo/ui/jetpack-compose';

const palette = getMaterialColors({ seedColor: '#8E24AA' });
console.log('available:', isDynamicColorAvailable, 'primary:', palette.primary);

API

No API data file found, sorry!