stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.3

package/src/ai-components/syntax-highlighting/utils/converter.ts

@@ -4,10 +4,10 @@ import type { ConvertOpts, CSSP } from '../types';
 
 const EM_DEFAULT = 16;
 
-// React Native's strict TypeScript API declares style properties as readonly.
+// Style properties are readonly in React Native's strict TypeScript API.
 type MutableTextStyle = { -readonly [K in keyof TextStyle]: TextStyle[K] };
 
-/** Parse CSS lengths like 14, "14", "14px", "1.25em", "0.875rem" */
+/** Parses a CSS length such as 14, "14px", "1.25em" or "0.875rem" into a number. */
 const len = (v: unknown, { baseFontSize, rootFontSize }: ConvertOpts): number | undefined => {
   if (v == null) return undefined;
   if (typeof v === 'number') return v;
@@ -27,43 +27,35 @@ const len = (v: unknown, { baseFontSize, rootFontSize }: ConvertOpts): number |
     const root = rootFontSize ?? baseFontSize ?? EM_DEFAULT;
     return Number.isFinite(n) ? n * root : undefined;
   }
-  // plain number-like string
   const n = Number(s);
   return Number.isFinite(n) ? n : undefined;
 };
 
-/** Font shorthand: e.g. "italic small-caps 700 14px/20px Menlo, monospace" */
+/** Parses a CSS `font` shorthand such as "italic small-caps 700 14px/20px Menlo, monospace". */
 const parseFontShorthand = (v: string, opts: ConvertOpts) => {
   const out: MutableTextStyle = {};
   const parts = v.split(/\s+/);
-  // Very light parser: pick out style, weight, size[/lineHeight], and family
-  // Strategy:
-  // - style: "normal|italic"
-  // - weight: "normal|bold|100..900"
-  // - when we hit a token like "14px" or "14px/20px" → size & optional lineHeight
-  // - everything after size token is font family (may contain commas/spaces)
+  // Reads in order: style, small-caps, weight, size[/lineHeight], then the family (everything after
+  // the size token, which may contain commas and spaces).
   let i = 0;
 
-  // style
   if (parts[i] === 'italic' || parts[i] === 'normal') {
     if (parts[i] !== 'normal') out.fontStyle = 'italic';
     i++;
   }
 
-  // (skip small-caps if present; RN uses fontVariant which is separate)
+  // RN models `small-caps` as `fontVariant`.
   if (parts[i] === 'small-caps') {
     out.fontVariant = ['small-caps'];
     i++;
   }
 
-  // weight
   if (/^(normal|bold|[1-9]00)$/.test(parts[i] ?? '')) {
     const token = parts[i]!;
     out.fontWeight = (token === 'normal' ? undefined : token) as TextStyle['fontWeight'];
     i++;
   }
 
-  // size[/lineHeight]
   const sizeToken = parts[i];
   if (
     sizeToken &&
@@ -79,10 +71,9 @@ const parseFontShorthand = (v: string, opts: ConvertOpts) => {
     i++;
   }
 
-  // family
   const family = parts.slice(i).join(' ').replace(/^,|,$/g, '').trim();
   if (family) {
-    // basic cleanup: take first family; strip quotes
+    // Only the first family is kept, without quotes.
     const first = family
       .split(',')[0]
       ?.trim()
@@ -93,7 +84,13 @@ const parseFontShorthand = (v: string, opts: ConvertOpts) => {
   return out;
 };
 
-/** map CSS (web) to RN TextStyle */
+/**
+ * Converts web CSS properties to an RN `TextStyle`.
+ *
+ * @param css The CSS properties to convert.
+ * @param options Font size bases for `em` and `rem` units.
+ * @returns The equivalent `TextStyle`.
+ */
 export const cssToRNTextStyle = (css: Partial<CSSP>, options: ConvertOpts = {}): TextStyle => {
   const opts: ConvertOpts = {
     baseFontSize: options.baseFontSize ?? EM_DEFAULT,
@@ -102,7 +99,6 @@ export const cssToRNTextStyle = (css: Partial<CSSP>, options: ConvertOpts = {}):
 
   const out: MutableTextStyle = {};
 
-  // Simple 1:1 or unit-converted mappings
   if (css.color) out.color = String(css.color);
 
   if (css.fontFamily) out.fontFamily = String(css.fontFamily);
@@ -130,7 +126,7 @@ export const cssToRNTextStyle = (css: Partial<CSSP>, options: ConvertOpts = {}):
     Object.assign(out, parseFontShorthand(css.font, opts));
   }
 
-  // Simulating the closest we can get to a CSS overflow-like functionality
+  // Maps the CSS overflow values to the closest RN `overflow`.
   const overflowLike = css.overflow ?? css.overflowX ?? css.overflowY;
   if (typeof overflowLike === 'string') {
     out.overflow =

package/src/ai-components/syntax-highlighting/utils/flatten-nodes.ts

@@ -31,7 +31,6 @@ export const flattenNodesToTextAndColorRanges = ({
 
     const { type, tagName, value, properties } = node;
 
-    // leaf node
     if (type === 'text') {
       if (value == null || value === '') return;
       const chunk = String(value);
@@ -45,7 +44,6 @@ export const flattenNodesToTextAndColorRanges = ({
       return;
     }
 
-    // node with children
     if (tagName) {
       const baseStyle =
         properties && properties.className
@@ -56,9 +54,7 @@ export const flattenNodesToTextAndColorRanges = ({
             )
           : { ...startingStyle, color: defaultColor };
 
-      // we take the node's color if present, then its inherited color
-      // if present and finally the block's default color if all else
-      // fails.
+      // Color precedence: the node's own, then the inherited one, then the block's default.
       const effectiveColor =
         (baseStyle as { color?: string | number }).color ?? inheritedColor ?? defaultColor;
 
@@ -70,7 +66,6 @@ export const flattenNodesToTextAndColorRanges = ({
       return;
     }
 
-    // fallback
     if (value != null) {
       const chunk = String(value);
       const start = text.length;
@@ -82,20 +77,17 @@ export const flattenNodesToTextAndColorRanges = ({
     }
   };
 
-  // Recursively flatten nodes
   const nodeArray = Array.isArray(nodes) ? nodes : [nodes];
   for (let i = 0; i < nodeArray.length; i++) {
     walk(nodeArray[i], defaultColor);
   }
 
-  // Merge adjacent ranges with same color and convert them to integers
+  // Merges adjacent ranges of the same color and converts colors to integers.
   rawRanges.sort((a, b) => a.start - b.start);
   const merged: ColorRange[] = [];
   for (let i = 0; i < rawRanges.length; i++) {
     const r = rawRanges[i]!;
-    // in case the color is malformed for some reason, use the defaultColor
-    // as this one should always be non-nullish.
-    const colorInt = processColor(r.color)!; // ?? processColor(defaultColor))!;
+    const colorInt = processColor(r.color)!;
 
     if (!merged.length) {
       merged.push({ start: r.start, end: r.end, color: colorInt });
@@ -131,12 +123,12 @@ export const flattenRowsToTextAndColorRanges = (
     const offset = fullText.length;
     fullText += text;
 
-    // Add newline between rows (no color)
+    // Rows are joined by an uncolored newline.
     if (rowIndex < rows.length - 1) {
       fullText += '\n';
     }
 
-    // Shift ranges by current offset & push
+    // Shift the row ranges by its offset in the full text.
     for (const r of ranges) {
       fullRanges.push({
         start: r.start + offset,

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' },
+});

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

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useDerivedValue } from 'react-native-reanimated';
+
+import { Canvas, LinearGradient, Path, vec } from '@shopify/react-native-skia';
+
+import { WAVE_STYLE } from './styles';
+import type { VoiceVisualizationProps } from './types';
+import type { VoiceVisualization } from './useVoiceVisualization';
+import { type VoiceCanvasSize, VoiceVisualizationView } from './VoiceVisualizationView';
+import {
+  WAVE_END,
+  WAVE_POSITIONS,
+  WAVE_START,
+  waveColors,
+  wavePath,
+  waveStrokeWidth,
+} from './waveGeometry';
+
+export type VoiceWaveProps = VoiceVisualizationProps;
+
+const WaveCanvas = ({
+  size: { height, pixelRatio, width },
+  visualization: { dark, driver },
+}: {
+  size: VoiceCanvasSize;
+  visualization: VoiceVisualization;
+}) => {
+  const path = useDerivedValue(() => wavePath(driver.value, width, height));
+  const colors = useDerivedValue(() => waveColors(driver.value, dark.value));
+  const m = Math.min(width, height);
+
+  return (
+    <Canvas style={{ height, width }}>
+      <Path
+        path={path}
+        strokeCap='round'
+        strokeJoin='round'
+        strokeWidth={waveStrokeWidth(width, height, pixelRatio)}
+        style='stroke'
+      >
+        <LinearGradient
+          colors={colors}
+          end={vec(width / 2 + WAVE_END * m, 0)}
+          positions={WAVE_POSITIONS}
+          start={vec(width / 2 + WAVE_START * m, 0)}
+        />
+      </Path>
+    </Canvas>
+  );
+};
+
+const renderWave = (visualization: VoiceVisualization, size: VoiceCanvasSize) => (
+  <WaveCanvas size={size} visualization={visualization} />
+);
+
+/**
+ * A voice agent as a single string, flat at its ends, carrying a wave packet that erupts with
+ * speech while its colors flow along it. Tapping the string 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 80% as wide as
+ * its shorter side, so give it a square or a wide box.
+ */
+export const VoiceWave = (props: VoiceWaveProps) => (
+  <VoiceVisualizationView {...props} renderCanvas={renderWave} visualStyle={WAVE_STYLE} />
+);

package/src/ai-components/voice-visualization/bounce.ts

@@ -0,0 +1,61 @@
+/**
+ * The bounce of a tap: a dip to 93% and an overshoot to 103% before settling, over 340 ms.
+ *
+ * These are authored keyframes rather than a spring: the ease-out curve times the whole run and
+ * the keyframes are linear between their stops.
+ */
+export const BOUNCE_DURATION = 0.34;
+
+const OFFSETS = [0, 0.3, 0.62, 1];
+const SCALES = [1, 0.93, 1.03, 1];
+
+/** How long ago the last bounce started, in seconds; infinite before the first. */
+export type BounceState = { age: number };
+
+export const createBounce = (): BounceState => ({ age: Number.POSITIVE_INFINITY });
+
+export const startBounce = (bounce: BounceState) => {
+  'worklet';
+  bounce.age = 0;
+};
+
+export const advanceBounce = (bounce: BounceState, seconds: number) => {
+  'worklet';
+  bounce.age += seconds;
+};
+
+/** CSS `ease-out`, `cubic-bezier(0, 0, 0.58, 1)`. */
+export const easeOut = (x: number) => {
+  'worklet';
+  const bx = 3 * 0.58;
+  const ax = 1 - bx;
+  const by = 3;
+  const ay = 1 - by;
+  let low = 0;
+  let high = 1;
+  for (let i = 0; i < 24; i++) {
+    const middle = (low + high) / 2;
+    if ((ax * middle + bx) * middle * middle < x) low = middle;
+    else high = middle;
+  }
+  const t = (low + high) / 2;
+  return (ay * t + by) * t * t;
+};
+
+/** The keyframed scale at `progress`, from 0 to 1. */
+export const scaleAt = (progress: number) => {
+  'worklet';
+  for (let i = 1; i < OFFSETS.length; i++) {
+    if (progress <= OFFSETS[i]) {
+      const fraction = (progress - OFFSETS[i - 1]) / (OFFSETS[i] - OFFSETS[i - 1]);
+      return SCALES[i - 1] + (SCALES[i] - SCALES[i - 1]) * fraction;
+    }
+  }
+  return 1;
+};
+
+export const bounceScale = (bounce: BounceState) => {
+  'worklet';
+  if (bounce.age >= BOUNCE_DURATION) return 1;
+  return scaleAt(easeOut(Math.max(bounce.age, 0) / BOUNCE_DURATION));
+};