Skip to content
Native Animation
Voice Tour Assistant animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add voice-tour-assistant

Voice Tour Assistant

A travel discovery flow linked by a moving voice orb, with configurable tours, labels, colors, and user avatar.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A travel discovery flow linked by a moving voice orb, with configurable tours, labels, colors, and user avatar.

How it works

  1. One stage shared value coordinates the home, listening, and results animation. An explicit active-screen state controls hit testing and accessibility, so transparent screens cannot intercept input. A single time value and normalized audio level drive the Skia shader without React renders per frame.
  2. startListening, showResults, and reset expose the same transitions used by the demo autoplay.
  3. A horizontal Gesture Handler pan moves the home tour carousel and springs to the nearest card. Gesture Handler pressables handle card, heart, and arrow taps independently; a drag cancels the press. Result rows use local assets supplied by the consumer.
  4. Region chips select a carousel card. Hearts toggle favorites per tour. Cards and arrows open tour details with a save toggle; the bottom bar opens Home, Favorites, Saved tours, and Profile. These collections last for the mounted session.
  5. The keyboard controls open an editable question; submit it with the center button or the keyboard Search key. The microphone starts a simulated listening session and finishes it into results. Supply level and onAsk to connect a host audio service; this component does not request microphone permission.
  6. The demo stops autoplay on pointer down or touch start, before the control action runs, and cancels all pending timers.
  7. Reduced motion keeps the orb still and uses short fades instead of the shared-orb flight.

Install

npx expo install @shopify/react-native-skia expo-image react-native-gesture-handler react-native-reanimated react-native-worklets @expo/vector-icons

Usage

import { useRef } from 'react';
import VoiceTourAssistant, { type VoiceTourAssistantRef } from './VoiceTourAssistant';

export function TravelSearch() {
  const assistant = useRef<VoiceTourAssistantRef>(null);
  return <VoiceTourAssistant ref={assistant} tours={tours} prompt="Find a quiet mountain escape" />;
}

Props

PropTypeDescription
toursVoiceTour[]Home carousel and results. Each item includes id, title, subtitle, description, image, and rating.
regionsstring[]Selectable region chips.
locationstringCurrent location label.
promptstringPhrase to transcribe and show with results.
userAvatarImageSourcePropTypeAvatar shown in the submitted prompt bubble.
labelsobjectOverrides for ask, search, trip heading, and results copy, plus home, favorites, saved, profile, emptyCollection, keyboardPlaceholder, submitSearch, saveTour, removeSavedTour, and closeDetails.
colorsobjectAccent, background, and three shader colors.
levelSharedValue<number>Optional live normalized voice level from 0 to 1.
onAsk() => voidCalled when listening starts.
onTourPress(tour: VoiceTour) => voidCalled when a carousel card, arrow, collection item, or result opens tour details.
onClose() => voidCalled when the flow is reset from a close control.
styleStyleProp<ViewStyle>Optional root style.
testIDstringRoot test identifier.

The forwarded ref exposes advanceCarousel(), startListening(), showResults(), and reset().

Compatibility

  • Expo SDK 58 and React Native 0.88
  • Reanimated 4.7, Worklets 0.13, and Skia 2.14
  • iOS and Android: supported
  • Web: supported.

Accessibility

Interactive controls have labels and roles, region chips remain individually tappable, and system reduced-motion preference disables the orb flight and shader motion.

Why this one

Most voice search flows discard their identity between listening and results. Here, the chrome orb stays present through all three stages, making the answer feel like a continuation of the conversation.

Icons: Feather from @expo/vector-icons (Lucide-compatible stroke family, ISC).

More animations