Listening bar & popup

ListeningBar · ListeningPopup@listenssoft/speechui-react-native

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.

ListeningBar

A full-width strip pinned to the top of the page, with the wave and the transcript.

ListeningPopup

A compact capsule that floats over the page and widens to fit the transcript.

Try it

The bar is at the top of the page. Hold anywhere and watch the wave pulse as you speak. On a device it renders in normal layout flow wherever you place it, and topInset pads it below a notch or status bar.

Loading the React Native kit…

Hold anywhere and say:“(anything — the bar shows it)”

React Native

Updates as you tick props

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 />  );}

API reference

React Native props for @listenssoft/speechui-react-native.

ListeningBar props

Prop	Type	Default	Description
`waveColor`	`string`	`theme accent`	Waveform color. Defaults to the active theme's accent (the listening color).
`alwaysShow`	`boolean`	`true`	Keep the bar visible when idle (static centered line — the web bar's default). Set false to slide it away between utterances.
`maxWidth`	`DimensionValue`	—	Constrain the bar's width and center it: a number (dp) or a percentage string, since React Native has no other units.
`topInset`	`number`	—	Extra top offset (e.g. a safe-area inset); the bar's background fills it.
`priority`	`number`	`0`	The most recently mounted popup or bar will be shown. Set the priority to change this.

On native the bar renders in normal layout flow wherever you place it — usually the top of a screen — so showing and hiding pushes content the way the web bar's spacer does.

ListeningBar extra props

Prop	Type	Default	Description
`style`	`StyleProp<ViewStyle>`	—	Style override for the bar container.

Styling hooks

Theme keys

Hook	Type	Default	Description
`theme.barBackground`	`token`	—	Bar and popup background (the popup applies its design's alpha). On native these live on the theme, so forcing LISTENS_LIGHT_THEME/LISTENS_DARK_THEME flips both too.
`theme.barText`	`token`	—	Transcript text color, for the bar and the popup.

Behavior notes

All frameworks: It is recommended to add a ListeningBar or ListeningPopup to your app to make the Listens experience more intuitive.
All frameworks: Only one bar or popup renders at a time. Every mounted bar and popup in the same Provider shares one stack: the most recently rendered will show, this can be changed by adjusting the priority in the Bar/Popup props.
React Native: The wave is an Animated polyline on native (no canvas exists) and a real canvas on react-native-web.

Text

ListensText