ColorPicker

A SwiftUI ColorPicker component for selecting colors.

iOS

Included in Expo Go

Recommended version:

~56.0.26

Expo UI ColorPicker matches the official SwiftUI ColorPicker API and allows app users to select colors from a palette.

ColorPicker row inside a Form, showing the current color swatch

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Basic color picker

ColorPickerExample.tsx

import { useState } from 'react';
import { Host, ColorPicker } from '@expo/ui/swift-ui';

export default function ColorPickerExample() {
  const [color, setColor] = useState('#FF6347');

  return (
    <Host matchContents>
      <ColorPicker label="Select a color" selection={color} onSelectionChange={setColor} />
    </Host>
  );
}

Color picker with opacity support

Use the supportsOpacity prop to allow users to select colors with alpha transparency.

ColorPickerOpacityExample.tsx

import { useState } from 'react';
import { Host, ColorPicker } from '@expo/ui/swift-ui';

export default function ColorPickerOpacityExample() {
  const [color, setColor] = useState('#FF634780');

  return (
    <Host matchContents>
      <ColorPicker
        label="Select a color with opacity"
        selection={color}
        onSelectionChange={setColor}
        supportsOpacity
      />
    </Host>
  );
}

API

import { ColorPicker } from '@expo/ui/swift-ui';

No API data file found, sorry!