React Native control gallery
Every control the React Native kit exports, with the code to paste.
These are real @listenssoft/speechui-react-native snippets, not previews — a React Native app can't run inside this page. To try the interaction model hands-on, the React gallery runs live in the browser; the speech behavior is identical across kits.
Listening bar & popup
Choose between a listening bar at the top of the page, or a compact floating popup. Both show the live transcript and a waveform that pulses to the engine's audio level.
import { ListeningBar } from "@listenssoft/speechui-react-native";
// The bar mirrors the engine, so there's nothing to drive — hold anywhere and
// it animates. It sits in normal layout flow, so render it first on a screen,
// above your content.
function Demo() {
return (
<ListeningBar />
);
}Text
Display text that swaps when listening.
import { ListensText } from "@listenssoft/speechui-react-native";
import { Text } from "react-native";
function Demo() {
return (
<Text>
<ListensText listeningContent='“Listening is active”'>
Hold the mic button to talk.
</ListensText>
</Text>
);
}Text field
A single-line input users can type into — or dictate into: “name Jane Doe”.
import { ListensTextField } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [name, setName] = useState("");
return (
<ListensTextField
label="Name"
command="name"
type="name"
placeholder="Jane Doe"
value={name}
onChangeText={setName}
onMatch={setName}
/>
);
}Text area
Multi-line dictation with no value filter — say the command and keep talking.
import { ListensTextArea } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [notes, setNotes] = useState("");
return (
<ListensTextArea
label="Notes"
command="notes"
placeholder="Dictate mission notes…"
value={notes}
onChangeText={setNotes}
onMatch={setNotes}
/>
);
}Label button
A styled button that fires when its command is heard — “launch” clicks it.
import { ListensLabelButton } from "@listenssoft/speechui-react-native";
import { View, Text } from "react-native";
import { useState } from "react";
function Demo() {
const [count, setCount] = useState(0);
return (
<View style={{ gap: 8, alignItems: "flex-start" }}>
<ListensLabelButton
label="Launch"
command="launch"
onPress={() => setCount((c) => c + 1)}
/>
<Text>Launched {count} times</Text>
</View>
);
}Button (bare)
A plain native button that responds to speech — zero kit markup, zero kit styles. Yours to design.
import { ListensButton } from "@listenssoft/speechui-react-native";
import { Text } from "react-native";
import { useState } from "react";
function Demo() {
const [count, setCount] = useState(0);
return (
<ListensButton
command="engage"
label="Engage"
onPress={() => setCount((c) => c + 1)}
style={{
paddingVertical: 8,
paddingHorizontal: 18,
borderRadius: 999,
borderWidth: 1,
borderColor: "#888",
}}
>
<Text>Engage ({count})</Text>
</ListensButton>
);
}Input (bare)
A plain native input that takes dictation — zero kit markup, zero kit styles. Yours to design.
import { ListensInput } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [callsign, setCallsign] = useState("");
return (
<ListensInput
command="callsign"
label="Callsign"
type="letters"
value={callsign}
onChangeText={setCallsign}
onMatch={setCallsign}
style={{
padding: 10,
borderWidth: 1,
borderColor: "#888",
borderRadius: 6,
}}
/>
);
}Toggle
An on/off switch that flips when its command is heard: “dark mode”.
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}
/>
);
}Toggle button & group
Press-to-activate buttons; grouped, they form a mutually-exclusive segmented control you can address by voice.
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>
);
}Slider
A slider users can drag — or set by voice: “volume to seventy”.
import { ListensSlider } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [volume, setVolume] = useState(40);
return (
<ListensSlider
label="Volume"
command="volume"
value={volume}
onValueChange={setVolume}
/>
);
}Radio group
Single select by voice: “size large” picks Large.
import { ListensRadioGroup } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [size, setSize] = useState("Medium");
return (
<ListensRadioGroup
label="Size"
command="size"
options={["Small", "Medium", "Large"]}
value={size}
onChange={setSize}
/>
);
}Checkbox
Multi select by voice: “toppings cheese and olives” toggles both.
import { ListensCheckbox } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [toppings, setToppings] = useState(["Cheese"]);
return (
<ListensCheckbox
label="Toppings"
command="toppings"
options={["Cheese", "Mushrooms", "Olives", "Peppers"]}
value={toppings}
onChange={setToppings}
/>
);
}Picker
A color picker whose grid opens on command and answers to color names: “color dark red”.
import { 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}
/>
);
}List
An editable checklist you can talk to: “checklist add fuel cells and rations”.
import { ListensList } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [items, setItems] = useState([
{ id: "1", text: "oxygen tanks", checked: true },
{ id: "2", text: "star charts", checked: false },
]);
return (
<ListensList
label="Pre-flight checklist"
command="checklist"
value={items}
onChange={setItems}
/>
);
}Combobox
A filterable select with a spoken trigger word: “destination” opens it, “Mars” picks it.
import { ListensComboBox } from "@listenssoft/speechui-react-native";
import { useState } from "react";
function Demo() {
const [destination, setDestination] = useState("");
return (
<ListensComboBox
label="Destination"
command="destination"
options={["Luna", "Mars", "Europa", "Titan", "Ganymede"]}
placeholder="Choose a destination…"
value={destination}
onChange={setDestination}
/>
);
}Command
The headless primitive: attach a spoken command to anything and run your own code when it's heard.
import { useListensCommand } from "@listenssoft/speechui-react-native";
import { View, Text, Pressable } from "react-native";
import { useState } from "react";
function Demo() {
const [status, setStatus] = useState("docked");
useListensCommand({
command: "undock",
onTriggered: () => setStatus("undocked"),
});
return (
<View style={{ gap: 8, alignItems: "flex-start" }}>
<Pressable onPress={() => setStatus("undocked")}>
<Text>Undock</Text>
</Pressable>
<Text>Status: {status}</Text>
</View>
);
}