Button (bare)
ListensButton@listenssoft/speechui-react-nativeA plain native button that responds to speech — zero kit markup, zero kit styles. Yours to design.
The bare primitives exist for apps with their own design system: Tailwind, Material, CSS modules, anything. ListensButton renders exactly one native <button> (a Pressable on React Native) with no classes, no wrapper, and no injected look — but it still speaks the full page contract, still respects claims, and still fires on its command. While the mic is open it carries a data-listening attribute for you to style.
The styled sibling is the label button.
Your styles, our speech
The pill styling here is the sample's own — the kit adds nothing.
Loading the React Native kit…
Hold anywhere and say:“engage”
Props
- not set
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> );}Styling the listening state
The data-listening attribute appears while the mic is open — with Tailwind that's the data-listening: variant; in plain CSS, [data-listening].
Loading the React Native kit…
Hold anywhere and say:“warp speed”
// React Native has no DOM attributes; track the listening state// with useListensContext() and style conditionally:import { ListensButton, useListensContext } from "@listenssoft/speechui-react-native";import { Text } from "react-native";
function Demo() { const { isListening } = useListensContext(); return ( <ListensButton command="warp speed" label="Warp speed" onPress={() => {}} style={{ borderWidth: 1, borderColor: isListening ? "red" : "#888", padding: 10 }} > <Text>Warp speed</Text> </ListensButton> );}What you can say
| Say | Effect |
|---|---|
| “engage” | Clicks the button (a real click event — type="submit" submits its form). |
| “…make it so, engage…” | Also fires (contains match), unless another control claimed the phrase. |
Identical trigger behavior to the label button: contains match, claims respected, ~1s cooldown per command against interim re-delivery.
API reference
React Native props for @listenssoft/speechui-react-native.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
command | string | label | The spoken command that fires onPress. |
label | string | — | Accessibility/contract label; the command fallback. Not rendered. |
…PressableProps | Pressable props | — | children, onPress, style, disabled — a plain Pressable with zero default styling. |
Styling hooks
Styling hooks
| Hook | Type | Default | Description |
|---|---|---|---|
style | StyleProp | — | The Pressable is unstyled; bring NativeWind, Tamagui, or StyleSheet. |
