Picker
ListensPicker@listenssoft/speechui-react-nativeA color picker whose grid opens on command and answers to color names: “color dark red”.
Speaking the command opens the swatch grid (once per listening session); whatever follows is matched against color names, most specific first — “dark red” wins over “red”. The palette is shared across all kits: light, base, and dark variants of nine hues, plus black and white — 29 names in all.
Basic picker
Loading the React Native kit…
Hold anywhere and say:“color”“color dark red”“color light blue”
Props
- not set
React Native
Updates as you tick propsimport { ListensPicker } from "@listenssoft/speechui-react-native";import { useState } from "react";
function Demo() { const [color, setColor] = useState("blue"); return ( <ListensPicker label="Accent color" command="color" value={color} onChange={setColor} /> );}What you can say
| Say | Effect |
|---|---|
| “color” | Opens the swatch grid (once per listening session). |
| “color dark red” | Opens if needed and selects dark red — most-specific name first, so “dark red” never lands on “red”. |
| “color … pink” | The name may arrive later in the same phrase; the first matching color wins. |
| “purple (no command configured)” | With no command set, any color name spoken selects directly. |
The spoken names are: light/dark/plain red, orange, yellow, green, blue, purple, pink, brown, grey — plus black and white.
API reference
React Native props for @listenssoft/speechui-react-native.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | — | Disables the picker. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label beside the swatch; the command fallback. |
command | string | label | The spoken command. |
colors | ListensColorOption[] | shared palette | Override the color options ({ name, hex }[]). RN-only — the web kits always use the shared palette. |
value | string | — | Controlled selected color name. |
onChange | (value: string) => void | — | Called with the color name — tap or speech. |
style / labelStyle | StyleProp | — | Container and label overrides. |
Styling hooks
Style props
| Hook | Type | Default | Description |
|---|---|---|---|
style / labelStyle | StyleProp | — | Direct overrides; swatches take their color from the palette. |
Behavior notes
- React Native: The
colorsprop lets a native app supply its own palette; spoken matching then runs against your names. - All frameworks: Closing and reopening by voice within one hold is deliberate: the grid opens once per listening session, so interim re-deliveries don't flap it.
