stream-chat-react-native-core 9.10.2-beta.4 → 9.11.0-beta.1

package/src/ai-components/__tests__/voicePalette.test.ts

@@ -0,0 +1,124 @@
+import { audioLevelInput, expressivityInput, speechEnv } from '../voice-visualization/math';
+import { luminance, parseColor, rgbToHsv, toHsvPalette } from '../voice-visualization/palette';
+import { snoise } from '../voice-visualization/simplex';
+import { GLOW_STYLE, WAVE_STYLE } from '../voice-visualization/styles';
+
+describe('voice visualization palette', () => {
+  it('keeps a color’s full hue, saturation and value', () => {
+    const hsv = rgbToHsv([0, 95 / 255, 1]);
+
+    expect(hsv.hue * 360).toBeCloseTo(217.6, 1);
+    expect(hsv.saturation).toBeCloseTo(1, 4);
+    expect(hsv.value).toBeCloseTo(1, 4);
+  });
+
+  it('keeps a muted color muted', () => {
+    // hsv(108°, 25%, 60%)
+    const hsv = rgbToHsv([0.48, 0.6, 0.45]);
+
+    expect(hsv.hue).toBeCloseTo(0.3, 2);
+    expect(hsv.saturation).toBeCloseTo(0.25, 2);
+    expect(hsv.value).toBeCloseTo(0.6, 4);
+  });
+
+  it('gives a gray no saturation', () => {
+    const hsv = rgbToHsv([0.5, 0.5, 0.5]);
+
+    expect(hsv.saturation).toBe(0);
+    expect(hsv.value).toBe(0.5);
+  });
+
+  it.each([
+    ['#005fff', [0, 95 / 255, 1]],
+    ['#0af', [0, 170 / 255, 1]],
+    ['#005fff80', [0, 95 / 255, 1]],
+    ['rgb(0, 95, 255)', [0, 95 / 255, 1]],
+    ['rgba(0, 95, 255, 0.5)', [0, 95 / 255, 1]],
+    ['hsl(0, 100%, 50%)', [1, 0, 0]],
+    ['rebeccapurple', [0.4, 0.2, 0.6]],
+    ['#000000', [0, 0, 0]],
+  ])('reads %s', (color, expected) => {
+    const rgb = parseColor(color);
+    expect(rgb).not.toBeNull();
+    rgb?.forEach((channel, i) => expect(channel).toBeCloseTo(expected[i], 2));
+  });
+
+  it('skips colors it cannot read', () => {
+    expect(parseColor('not-a-color')).toBeNull();
+    expect(parseColor('#12345')).toBeNull();
+    expect(parseColor('')).toBeNull();
+    expect(toHsvPalette(['nope', '#ff0000'])).toHaveLength(1);
+  });
+
+  it('keeps only the first five colors', () => {
+    expect(toHsvPalette(Array.from({ length: 7 }, () => '#ff0000'))).toHaveLength(5);
+  });
+
+  it('measures luminance for the light or dark look', () => {
+    expect(luminance('#ffffff')).toBeCloseTo(1, 4);
+    expect(luminance('#000000')).toBe(0);
+    expect(luminance('#1c1e22')).toBeLessThan(0.5);
+    expect(luminance('')).toBeNull();
+  });
+});
+
+describe('voice visualization inputs', () => {
+  it('clamps expressivity to 0-2 and replaces one that is not a number', () => {
+    expect(expressivityInput(3)).toBe(2);
+    expect(expressivityInput(-1)).toBe(0);
+    expect(expressivityInput(0.5)).toBe(0.5);
+    expect(expressivityInput(Number.NaN)).toBe(1);
+    expect(expressivityInput(Number.POSITIVE_INFINITY)).toBe(1);
+    expect(expressivityInput(undefined)).toBe(1);
+  });
+
+  it('clamps the audio level to 0-1 and treats one that is not a number as no audio', () => {
+    expect(audioLevelInput(2)).toBe(1);
+    expect(audioLevelInput(-1)).toBe(0);
+    expect(audioLevelInput(0.4)).toBe(0.4);
+    expect(audioLevelInput(Number.NaN)).toBeNull();
+    expect(audioLevelInput(null)).toBeNull();
+    expect(audioLevelInput(undefined)).toBeNull();
+  });
+});
+
+describe('voice visualization noise', () => {
+  it('matches the shader’s simplex noise as a GPU computes it', () => {
+    // Read back from the shader's own snoise on a GPU (stream-chat-react's fixtures).
+    const gpu: Array<[number, number, number, number]> = [
+      [0.3, 21, 0, 0.7696],
+      [1.7, 5, 0, 0.208],
+      [0.12, 0, 0, 0.049],
+      [2.5, 9, 0, 0.3869],
+      [10.2, 14, 0, 0.603],
+      [3.3, 1.1, 0.9, -0.7541],
+      [0.05, 0.05, 0.05, -0.5481],
+    ];
+    for (const [x, y, z, expected] of gpu) {
+      expect(snoise(x, y, z)).toBeCloseTo(expected, 2);
+    }
+  });
+
+  it('gives speech phrases and pauses', () => {
+    const samples = Array.from({ length: 2000 }, (_, i) => speechEnv(i * 0.01));
+
+    expect(Math.min(...samples)).toBe(0);
+    expect(Math.max(...samples)).toBeGreaterThan(0.6);
+    expect(Math.max(...samples)).toBeLessThanOrEqual(1);
+  });
+});
+
+describe('voice visualization hit areas', () => {
+  it('takes the globe within a third of the shorter side', () => {
+    expect(GLOW_STYLE.contains(0, 0)).toBe(true);
+    expect(GLOW_STYLE.contains(0.2, 0.2)).toBe(true);
+    expect(GLOW_STYLE.contains(0.3, 0.3)).toBe(false);
+  });
+
+  it('takes the string across, and only near its line', () => {
+    expect(WAVE_STYLE.contains(0.45, 0)).toBe(true);
+    expect(WAVE_STYLE.contains(0, 0.1)).toBe(true);
+    expect(WAVE_STYLE.contains(0, 0.2)).toBe(false);
+    expect(WAVE_STYLE.contains(0.55, 0)).toBe(false);
+  });
+});

package/src/ai-components/index.ts

@@ -5,6 +5,7 @@ export * from './charts';
 export * from './message-composer';
 export * from './StreamingMessageView';
 export * from './AITypingIndicatorView';
+export * from './voice-visualization';
 
 // components
 export * from './components';
@@ -15,7 +16,8 @@ export * from './contexts';
 // services
 export * from './services';
 export * from './transcription/useDictation';
-export { isDictationAvailable } from './native/AIDictation';
+export * from './transcription/useDictationAudioLevel';
+export { isDictationAvailable, type DictationLevel } from './native/AIDictation';
 
 // state-stores
 export * from './store';

package/src/ai-components/message-composer/ComposerView.tsx

@@ -19,7 +19,7 @@ import type {
   AbstractMediaPickerService,
   MediaPickerState,
 } from '../services/media-picker-service/AbstractMediaPickerService';
-import { useComposerText } from '../store';
+import { COMPOSER_DICTATION_SOURCE, useComposerText } from '../store';
 import type { ComposerState } from '../store';
 import { useDictationState } from '../store/dictation/useDictationState';
 import { useDictationTranscript } from '../store/dictation/useDictationTranscript';
@@ -100,7 +100,7 @@ export const AIMessageInput = () => {
   } = useTheme();
   const styles = useStyles();
 
-  const { error, isRecording } = useDictationState();
+  const { error, isRecording, source } = useDictationState();
   const { text } = useComposerText();
   const { transcript } = useDictationTranscript();
   const { setText } = useMessageComposerContext();
@@ -109,10 +109,13 @@ export const AIMessageInput = () => {
   useEffect(() => {
     const transcriptChanged = transcript !== previousTranscript.current;
     previousTranscript.current = transcript;
+    // Only dictation from the composer's own button fills the input; dictation started elsewhere
+    // (a voice mode, say) must not overwrite what the user typed.
+    if (source !== COMPOSER_DICTATION_SOURCE) return;
     if (!error && (isRecording || transcriptChanged)) {
       setText(transcript);
     }
-  }, [isRecording, transcript, error, setText]);
+  }, [isRecording, transcript, error, setText, source]);
 
   return (
     <TextInput

package/src/ai-components/message-composer/SpeechToTextButton.tsx

@@ -9,7 +9,7 @@ import { Mic } from '../internal/icons/Mic';
 
 import { isDictationAvailable, warnIfDictationUnavailable } from '../native/AIDictation';
 import type { DictationStartOptions } from '../native-specs/NativeAIDictation';
-import { dictationStore, type DictationStoreState } from '../store';
+import { COMPOSER_DICTATION_SOURCE, dictationStore, type DictationStoreState } from '../store';
 import { useDictation } from '../transcription/useDictation';
 
 const selector = ({ isRecording }: DictationStoreState) => ({
@@ -33,6 +33,9 @@ export const SpeechToTextButton = (props: SpeechToTextButtonProps) => {
   return <AvailableSpeechToTextButton {...props} />;
 };
 
+// Marks this button's dictation as the composer's, so `ComposerView` fills its input with it.
+const DICTATION_OPTIONS = { source: COMPOSER_DICTATION_SOURCE };
+
 const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
   const {
     theme: {
@@ -41,7 +44,7 @@ const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
     },
   } = useTheme();
 
-  const { cancel, toggle } = useDictation(options);
+  const { cancel, toggle } = useDictation(options, DICTATION_OPTIONS);
   const { isRecording } = useStateStore(dictationStore, selector);
 
   useEffect(() => {

package/src/ai-components/native/AIDictation.ts

@@ -11,6 +11,10 @@ import NativeAIDictation, {
 const ON_STATE_EVENT = 'AIDictationOnState';
 const ON_RESULT_EVENT = 'AIDictationOnResult';
 const ON_ERROR_EVENT = 'AIDictationOnError';
+const ON_LEVEL_EVENT = 'AIDictationOnLevel';
+
+/** The microphone's level while dictation listens, from 0 to 1. */
+export type DictationLevel = { level: number };
 
 let eventEmitter: NativeEventEmitter | undefined;
 const getEventEmitter = () => {
@@ -74,4 +78,11 @@ export const AIDictation = {
     );
     return sub ? () => sub.remove() : noop;
   },
+  /** The microphone's level while dictation listens, about 10 to 30 times a second. */
+  addLevelListener(listener: (payload: DictationLevel) => void) {
+    const sub = getEventEmitter()?.addListener(ON_LEVEL_EVENT, (event) =>
+      listener(event as DictationLevel),
+    );
+    return sub ? () => sub.remove() : noop;
+  },
 };

package/src/ai-components/store/dictation/store.ts

@@ -7,6 +7,11 @@ export type DictationStoreState = {
   transcript: string;
   isRecording: boolean;
   error?: DictationError | null;
+  /**
+   * Who started the current dictation, as passed to `useDictation`, or `null`. Lets a consumer
+   * such as `ComposerView` pick up only the transcripts meant for it.
+   */
+  source?: string | null;
 };
 
 const DEFAULT_STATE: DictationStoreState = {
@@ -14,8 +19,12 @@ const DEFAULT_STATE: DictationStoreState = {
   transcript: '',
   isRecording: false,
   error: null,
+  source: null,
 };
 
+/** The `source` of dictation started by the composer's own `SpeechToTextButton`. */
+export const COMPOSER_DICTATION_SOURCE = 'composer';
+
 export const dictationStore = new StateStore<DictationStoreState>(DEFAULT_STATE);
 
 const reset = () => dictationStore.next(DEFAULT_STATE);

package/src/ai-components/store/dictation/useDictationState.ts

@@ -2,10 +2,11 @@ import { useStateStore } from '@stream-io/state-store/react-bindings';
 
 import { dictationStore, type DictationStoreState } from './store';
 
-const selector = ({ state, isRecording, error }: DictationStoreState) => ({
+const selector = ({ state, isRecording, error, source }: DictationStoreState) => ({
   state,
   isRecording,
   error,
+  source,
 });
 
 export const useDictationState = () => useStateStore(dictationStore, selector);

package/src/ai-components/store/index.ts

@@ -9,3 +9,5 @@ export * from './composer/useComposerText';
 
 // dictation
 export * from './dictation/store';
+export * from './dictation/useDictationState';
+export * from './dictation/useDictationTranscript';

package/src/ai-components/theme.ts

@@ -56,6 +56,19 @@ export type Theme = {
   aiTypingIndicatorView: {
     text: TextStyle;
   };
+  /**
+   * `VoiceGlow` and `VoiceWave`. Optional, so a hand-built `Theme` without it keeps type-checking;
+   * the visualizations fall back to the default accent then.
+   */
+  voiceVisualization?: {
+    /** One to five colors, used when a visualization is given no `colors` of its own. */
+    colors: string[];
+    /**
+     * The color the visualizations sit on, which tells them to draw for a light or a dark
+     * background. Defaults to the system's color scheme.
+     */
+    backdropColor?: string;
+  };
 };
 
 export const defaultTheme: Theme = {
@@ -135,4 +148,7 @@ export const defaultTheme: Theme = {
   aiTypingIndicatorView: {
     text: {},
   },
+  voiceVisualization: {
+    colors: [colors.accent_blue],
+  },
 };

package/src/ai-components/transcription/useDictation.ts

@@ -27,7 +27,19 @@ const selector = ({ isRecording }: DictationStoreState) => ({
 });
 
 // TODO: add proper jsdocs
-export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPTIONS) => {
+export type UseDictationOptions = {
+  /**
+   * Who is dictating, stored as the dictation store's `source` when dictation starts. The
+   * `ComposerView` only fills its input with dictation whose source is the composer's own, so
+   * dictation started elsewhere (a voice mode, say) leaves the composer's text alone.
+   */
+  source?: string;
+};
+
+export const useDictation = (
+  defaultOptions: DictationStartOptions = DEFAULT_OPTIONS,
+  { source }: UseDictationOptions = {},
+) => {
   const { isRecording } = useStateStore(dictationStore, selector);
 
   useEffect(() => {
@@ -65,11 +77,12 @@ export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPT
             code: 'NO_PERMISSION',
             message: 'Microphone permission not granted',
           },
+          source: source ?? null,
         });
         return;
       }
 
-      dictationStore.partialNext({ error: null, transcript: '' });
+      dictationStore.partialNext({ error: null, source: source ?? null, transcript: '' });
 
       const opts: DictationStartOptions = {
         ...defaultOptions,
@@ -78,7 +91,7 @@ export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPT
 
       AIDictation.start(opts);
     },
-    [defaultOptions],
+    [defaultOptions, source],
   );
 
   const stop = useCallback(() => {

package/src/ai-components/transcription/useDictationAudioLevel.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+import { type SharedValue, useSharedValue } from 'react-native-reanimated';
+
+import { AIDictation } from '../native/AIDictation';
+
+/**
+ * The microphone's live level while dictation listens, from 0 to 1, for the `audioLevel` of
+ * `VoiceWave` and `VoiceGlow`. It is `null` while dictation is not listening, which lets a
+ * visualization animate speech on its own.
+ *
+ * The level is a shared value rather than state, so a level changing many times a second
+ * re-renders nothing: the visualizations read it once a frame on the UI thread.
+ */
+export const useDictationAudioLevel = (): SharedValue<number | null> => {
+  const level = useSharedValue<number | null>(null);
+
+  useEffect(() => {
+    const unsubscribeLevel = AIDictation.addLevelListener((payload) => {
+      level.value = typeof payload?.level === 'number' ? payload.level : null;
+    });
+    const unsubscribeState = AIDictation.addStateListener(({ state }) => {
+      if (state !== 'listening' && state !== 'starting') level.value = null;
+    });
+    const unsubscribeError = AIDictation.addErrorListener(() => {
+      level.value = null;
+    });
+
+    return () => {
+      unsubscribeLevel();
+      unsubscribeState();
+      unsubscribeError();
+      level.value = null;
+    };
+  }, [level]);
+
+  return level;
+};

package/src/ai-components/voice-visualization/VoiceGlow.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { useDerivedValue } from 'react-native-reanimated';
+
+import { Canvas, Fill, Shader } from '@shopify/react-native-skia';
+
+import { driverReact, driverScale } from './driver';
+import { getGlowEffect } from './glowShader';
+import { GLOW_STYLE } from './styles';
+import type { VoiceVisualizationProps } from './types';
+import type { VoiceVisualization } from './useVoiceVisualization';
+import { type VoiceCanvasSize, VoiceVisualizationView } from './VoiceVisualizationView';
+
+export type VoiceGlowProps = VoiceVisualizationProps;
+
+const GlowCanvas = ({
+  size: { height, width },
+  visualization: { dark, driver },
+}: {
+  size: VoiceCanvasSize;
+  visualization: VoiceVisualization;
+}) => {
+  const effect = getGlowEffect();
+  const uniforms = useDerivedValue(() => {
+    const d = driver.value;
+    const color = (i: number) => [d.colors[i].hue, d.colors[i].saturation, d.colors[i].value, 0];
+    return {
+      bright: d.bright,
+      col0: color(0),
+      col1: color(1),
+      col2: color(2),
+      col3: color(3),
+      col4: color(4),
+      count: d.count,
+      dark: dark.value,
+      flow: d.flow,
+      flowSpin: d.flowSpin,
+      hover: [d.hoverX, d.hoverY],
+      hoverAmt: d.hoverAmount,
+      load: d.load,
+      mic: d.mic,
+      orbSpin: d.orbSpin,
+      react: driverReact(d),
+      resolution: [width, height],
+      sat: d.sat,
+      scale: driverScale(d),
+      tap: [d.tapX, d.tapY],
+      tapTime: d.tapAge,
+      time: d.time,
+      voice: d.voice,
+    };
+  });
+
+  if (!effect) return null;
+
+  return (
+    <Canvas style={{ height, width }}>
+      <Fill>
+        <Shader source={effect} uniforms={uniforms} />
+      </Fill>
+    </Canvas>
+  );
+};
+
+const renderGlow = (visualization: VoiceVisualization, size: VoiceCanvasSize) => (
+  <GlowCanvas size={size} visualization={visualization} />
+);
+
+/**
+ * A voice agent as a soft, airy globe: color masses orbit inside it and swell with speech, and the
+ * gaps between them let the background show through. Tapping the globe bounces it and ripples it
+ * from the touch, and so does a hovering mouse or pen.
+ *
+ * It has no size of its own and draws in the middle of the view it is given, about half as wide
+ * as its shorter side, so give it a square.
+ */
+export const VoiceGlow = (props: VoiceGlowProps) => (
+  <VoiceVisualizationView {...props} renderCanvas={renderGlow} visualStyle={GLOW_STYLE} />
+);

package/src/ai-components/voice-visualization/VoiceVisualizationView.tsx

@@ -0,0 +1,179 @@
+import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
+import {
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  PixelRatio,
+  type PointerEvent,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import type { VoiceVisualizationStyle } from './styles';
+import type { VoiceAgentState, VoiceVisualizationProps } from './types';
+import { useVoiceVisualization, type VoiceVisualization } from './useVoiceVisualization';
+
+/** What the renderer draws in: the canvas size, in its own units, and the screen's pixels per unit. */
+export type VoiceCanvasSize = { height: number; pixelRatio: number; width: number };
+
+type ViewProps = VoiceVisualizationProps & {
+  /** Draws the visualization into a canvas of the given size. */
+  renderCanvas: (visualization: VoiceVisualization, size: VoiceCanvasSize) => ReactNode;
+  visualStyle: VoiceVisualizationStyle;
+};
+
+const DEFAULT_STATE_LABELS: Record<VoiceAgentState, string> = {
+  connecting: 'Connecting',
+  idle: 'Ready',
+  listening: 'Listening',
+  speaking: 'Speaking',
+  thinking: 'Thinking',
+};
+
+/**
+ * What VoiceWave and VoiceGlow share: the motion, the canvas kept at the view's size and at most
+ * the style's density, reduced motion, taps and hover, and accessibility.
+ *
+ * It names itself "Voice agent" with its state as the value, as on iOS and Android. Touches are
+ * only watched, never claimed, so a press handler on the view or a parent still gets them, and
+ * only the shape takes them: around it they reach whatever is behind.
+ */
+export const VoiceVisualizationView = ({
+  accessibilityLabel = 'Voice agent',
+  accessibilityValue,
+  audioLevel,
+  colors,
+  expressivity,
+  onLayout,
+  pointerEvents = 'box-none',
+  renderCanvas,
+  state,
+  stateLabels,
+  style,
+  visualStyle,
+  ...restProps
+}: ViewProps) => {
+  const visualization = useVoiceVisualization(
+    { audioLevel, colors, expressivity, state },
+    visualStyle,
+  );
+  const { hover, opacity, tap } = visualization;
+  const [layout, setLayout] = useState({ height: 0, width: 0 });
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      onLayout?.(event);
+      const { height, width } = event.nativeEvent.layout;
+      setLayout((current) =>
+        current.width === width && current.height === height ? current : { height, width },
+      );
+    },
+    [onLayout],
+  );
+
+  const side = Math.min(layout.width, layout.height);
+  const pixelRatio = PixelRatio.get();
+  // Drawn at no more than the style's density, then scaled up to the view: the glow's soft
+  // gradients look the same at 2x with fewer pixels to fill, while the wave's line needs 3x.
+  const density = Math.min(1, visualStyle.maxScale / pixelRatio);
+  const canvasSize = useMemo<VoiceCanvasSize>(
+    () => ({
+      height: layout.height * density,
+      pixelRatio: pixelRatio * density,
+      width: layout.width * density,
+    }),
+    [density, layout.height, layout.width, pixelRatio],
+  );
+  const hitWidth = visualStyle.hitArea.width * side;
+  const hitHeight = visualStyle.hitArea.height * side;
+
+  /** A touch on the hit area, centred on the view and normalized to its shorter side, y up. */
+  const toLocalPoint = useCallback(
+    (locationX: number, locationY: number) => ({
+      x: (locationX - hitWidth / 2) / (side || 1),
+      y: (hitHeight / 2 - locationY) / (side || 1),
+    }),
+    [hitHeight, hitWidth, side],
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: GestureResponderEvent) => {
+      const { x, y } = toLocalPoint(event.nativeEvent.locationX, event.nativeEvent.locationY);
+      if (visualStyle.contains(x, y)) tap(x, y);
+    },
+    [tap, toLocalPoint, visualStyle],
+  );
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent) => {
+      // Only a hovering mouse or pen ripples it; a finger has no hover.
+      const { buttons, offsetX, offsetY, pointerType } = event.nativeEvent;
+      if (pointerType === 'touch') return;
+      const { x, y } = toLocalPoint(offsetX, offsetY);
+      const hovering = buttons === 0 && visualStyle.contains(x, y);
+      hover(hovering ? x : null, hovering ? y : null);
+    },
+    [hover, toLocalPoint, visualStyle],
+  );
+
+  const handlePointerLeave = useCallback(() => hover(null, null), [hover]);
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole='image'
+      accessibilityValue={
+        accessibilityValue ?? { text: stateLabels?.[state] ?? DEFAULT_STATE_LABELS[state] }
+      }
+      accessible
+      onLayout={handleLayout}
+      pointerEvents={pointerEvents}
+      style={style}
+      {...restProps}
+    >
+      {side > 0 ? (
+        <>
+          <Animated.View
+            pointerEvents='none'
+            style={[
+              styles.canvas,
+              {
+                height: canvasSize.height,
+                left: (layout.width - canvasSize.width) / 2,
+                opacity,
+                top: (layout.height - canvasSize.height) / 2,
+                transform: [{ scale: 1 / density }],
+                width: canvasSize.width,
+              },
+            ]}
+          >
+            {renderCanvas(visualization, canvasSize)}
+          </Animated.View>
+          <View
+            // A transparent view with only handlers could be flattened away, leaving no target.
+            collapsable={false}
+            onPointerLeave={handlePointerLeave}
+            onPointerMove={handlePointerMove}
+            onTouchEnd={handleTouchEnd}
+            style={[
+              styles.hitArea,
+              {
+                height: hitHeight,
+                left: (layout.width - hitWidth) / 2,
+                top: (layout.height - hitHeight) / 2,
+                width: hitWidth,
+              },
+            ]}
+            testID='voice-visualization-hit-area'
+          />
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  canvas: { position: 'absolute' },
+  hitArea: { position: 'absolute' },
+});