Toggle
ListensToggle@listenssoft/speechui-react-nativeAn on/off switch that flips when its command is heard: “dark mode”.
Speaking the command toggles the switch — the same trigger pattern as a button, applied to a boolean. Clicking and keyboard toggling work as on any switch, speech or no speech.
Basic toggle
Loading the React Native kit…
Hold anywhere and say:“dark mode”
Props
- not set
import { ListensToggle } from "@listenssoft/speechui-react-native";import { useState } from "react";
function Demo() { const [enabled, setEnabled] = useState(false); return ( <ListensToggle label="Dark mode" command="dark mode" value={enabled} onValueChange={setEnabled} /> );}Bare mode (React)
React-only: bare renders just the underlying checkbox input so a parent supplies the visual switch — for Tailwind switches and design systems. className, id, and name forward to the input.
Loading the React Native kit…
Hold anywhere and say:“autopilot”
// React Native has no bare mode; style the toggle via its style// props or theme tokens (success, track, toggleThumb), or build your// own switch on useListensCommand:import { useListensCommand } from "@listenssoft/speechui-react-native";import { Switch } from "react-native";import { useState } from "react";
function Demo() { const [on, setOn] = useState(false); useListensCommand({ command: "autopilot", onTriggered: () => setOn((v) => !v), }); return <Switch value={on} onValueChange={setOn} />;}What you can say
| Say | Effect |
|---|---|
| “dark mode” | Toggles the switch once. |
| “…turn on dark mode please…” | Also toggles — matching is contains. (The words “on/off” are not parsed; each match flips the current state.) |
| “dark mode … (again within ~1s)” | Ignored by the per-command cooldown; repeat after a brief pause to flip back. |
The toggle flips on each match rather than parsing an on/off argument — say it again to flip back. Pair it with listeningContent to show the current effect (“say: dark mode to turn off”).
API reference
React Native props for @listenssoft/speechui-react-native.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | — | Disables the switch. |
The RN toggle renders the web kits' switch exactly (44×24 track, success green when on, 20px thumb, 160ms) rather than the platform Switch, so all kits look identical.
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label beside the switch; the command fallback. |
command | string | label | The spoken command that toggles the switch. |
value | boolean | — | Controlled state. Pair with onValueChange. (RN's Switch naming, not checked/onChange.) |
onValueChange | (value: boolean) => void | — | Called with the next state — tap or speech. |
style | StyleProp<ViewStyle> | — | Container override. |
labelStyle | StyleProp<TextStyle> | — | Label text override. |
Styling hooks
Style props and theme keys
| Hook | Type | Default | Description |
|---|---|---|---|
style / labelStyle | StyleProp | — | Direct overrides. |
theme.success / theme.track / theme.toggleThumb | token | — | On color, off track, thumb — from the active ListensTheme. |
