Toggle button & group
ListensToggleButton · ListensToggleButtonGroup@listenssoft/speechui-react-nativePress-to-activate buttons; grouped, they form a mutually-exclusive segmented control you can address by voice.
Say a button's label and it activates. Inside a group, activating one deactivates the others — a segmented control (“Day / Week / Month”) whose segments are each addressable by voice.
Exclusive group (segmented control)
Loading the React Native kit…
Hold anywhere and say:“week”“month”“day”
import { ListensToggleButton, ListensToggleButtonGroup,} from "@listenssoft/speechui-react-native";import { View, Text } from "react-native";import { useState } from "react";
function Demo() { const [view, setView] = useState("Day"); const button = (label) => ( <ListensToggleButton label={label} checked={view === label} onChange={(checked) => checked && setView(label)} /> ); return ( <View style={{ gap: 8, alignItems: "flex-start" }}> <ListensToggleButtonGroup> {button("Day")} {button("Week")} {button("Month")} </ListensToggleButtonGroup> <Text>Showing: {view}</Text> </View> );}A single toggle button
Outside a group it's an independent pressed state — speaking the command toggles it on and off.
Loading the React Native kit…
Hold anywhere and say:“mute”
Props
- not set
import { ListensToggleButton } from "@listenssoft/speechui-react-native";import { useState } from "react";
function Demo() { const [muted, setMuted] = useState(false); return ( <ListensToggleButton label="Mute" command="mute" checked={muted} onChange={setMuted} /> );}What you can say
| Say | Effect |
|---|---|
| “week” | Activates the “Week” button; in a group, the others deactivate. |
| “…switch to week view…” | Also matches (contains), claims permitting. |
| “mute (on a lone button)” | Toggles the pressed state each time it's heard (with the ~1s cooldown between fires). |
In a group, a spoken command activates its button but never deactivates it — speech re-selecting the active segment is a no-op, matching how segmented controls behave by pointer.
API reference
React Native props for @listenssoft/speechui-react-native.
ListensToggleButton props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | — | Disables the button. |
Inside a ListensToggleButtonGroup, checking one button unchecks the others — exclusivity comes from the group component on native.
ListensToggleButton extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Button text; the command fallback. |
command | string | label | The spoken command that activates the button. |
checked | boolean | — | Controlled pressed state. |
onChange | (checked: boolean) => void | — | Called with the next pressed state. |
style / textStyle | StyleProp | — | Container and label overrides. |
ListensToggleButtonGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | The buttons, laid out as one segmented control (shared border, 1px dividers, no gaps — matching the web group). |
style | StyleProp<ViewStyle> | — | Group container override. |
Styling hooks
Style props and theme keys
| Hook | Type | Default | Description |
|---|---|---|---|
style / textStyle | StyleProp | — | Direct overrides. |
theme.segmentOn / theme.segmentOnBorder / theme.buttonBorder | token | — | Active fill, active border, and the shared group border. |
