ColorPicker

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

Usage

Basic color picker

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

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

  // A color picker fills the width it is given, so `matchContents` collapses it.
  return (
    <Host style={{ flex: 1 }}>
      <ColorPicker
        label="Select a color"
        selection={color}
        onSelectionChange={setColor}
      />
    </Host>
  );
}

The system color picker sheet open on the Grid tab, with opacity at 100 percent

Color picker with opacity support

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

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

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

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

The system color picker sheet open on the Grid tab, with opacity at 50 percent

API

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

Component

`ColorPicker`

Type: React.Element<ColorPickerProps>

Renders a ColorPicker component using SwiftUI.

ColorPickerProps

`label`

Optional • Type: string

A label displayed on the ColorPicker.

`onSelectionChange`

Optional • Type: (value: string) => void

Callback function that is called when a new color is selected.

`selection`

Literal type: union

The currently selected color in the format #RRGGBB or #RRGGBBAA.

Acceptable values are: string | null

`supportsOpacity`

Optional • Type: boolean

Whether the color picker should support opacity.

Inherited props

CommonViewModifierProps

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version.

Expo UI lets you put any of the 89 modifiers for any view on ColorPicker, but not all of them do something here.

70 change what you see on ColorPicker.
6 have no visible effect on ColorPicker.
13 work only in one place, such as a widget or a Grid.

Best modifiers for ColorPicker

These modifiers are made for ColorPicker, or they are the ones that you use most with it.

Also works on ColorPicker

ColorPicker takes these modifiers too, and each one works in the usual way.

No visible effect on ColorPicker

ColorPicker accepts these modifiers, but you see no change. They do not give an error.

Modifier	Why nothing happens
`accessibilityElement`	It joins the child views into one accessibility element, and ColorPicker takes no child views.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and ColorPicker takes no child views.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and ColorPicker takes none.
`imageScale`	It changes only SF Symbols, and ColorPicker shows none.
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and ColorPicker does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

Sources

The original Expo docs for this page:

ColorPicker (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/colorpicker.md)

On this page