react-native-ai-animations 0.0.0-stage → 0.8.1

package/lib/module/skia/voice-wave.js

@@ -0,0 +1,278 @@
+"use strict";
+
+import { Canvas, LinearGradient, Path, Skia, useClock, vec } from "@shopify/react-native-skia";
+import { useState } from "react";
+import { View } from "react-native";
+import { useDerivedValue, useFrameCallback, useReducedMotion, useSharedValue } from "react-native-reanimated";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_HEIGHT = 32;
+const SAMPLE_STEP = 2;
+const MIN_AMPLITUDE = 1.5;
+const EDGE_PADDING = 2;
+const HISTORY = 96;
+const PUSH_MS = 70;
+const LAYERS = [{
+  frequency: 1.1,
+  speed: 0.0024,
+  phase: 2.6,
+  amplitude: 0.55,
+  strokeWidth: 1.5,
+  opacity: 0.45
+}, {
+  frequency: 2.3,
+  speed: -0.0031,
+  phase: 1.4,
+  amplitude: 0.75,
+  strokeWidth: 1.5,
+  opacity: 0.6
+}, {
+  frequency: 1.6,
+  speed: 0.0042,
+  phase: 0,
+  amplitude: 1,
+  strokeWidth: 2,
+  opacity: 1
+}];
+function WaveLayerPath({
+  layer,
+  width,
+  height,
+  level,
+  clock,
+  color
+}) {
+  const path = useDerivedValue(() => {
+    const middle = height / 2;
+    const reach = middle - EDGE_PADDING;
+    const amplitude = (MIN_AMPLITUDE + level.value * (reach - MIN_AMPLITUDE)) * layer.amplitude;
+    const offset = clock.value * layer.speed + layer.phase;
+    const next = Skia.Path.Make();
+    for (let x = 0; x <= width; x += SAMPLE_STEP) {
+      const progress = x / width;
+      const envelope = Math.sin(Math.PI * progress);
+      const y = middle + amplitude * envelope * Math.sin(2 * Math.PI * layer.frequency * progress + offset);
+      if (x === 0) next.moveTo(x, y);else next.lineTo(x, y);
+    }
+    return next;
+  });
+  return /*#__PURE__*/_jsx(Path, {
+    path: path,
+    style: "stroke",
+    strokeWidth: layer.strokeWidth,
+    strokeCap: "round",
+    strokeJoin: "round",
+    color: color,
+    opacity: layer.opacity
+  });
+}
+function Lines({
+  width,
+  height,
+  level,
+  clock,
+  colors
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: LAYERS.map((layer, index) => /*#__PURE__*/_jsx(WaveLayerPath, {
+      layer: layer,
+      width: width,
+      height: height,
+      level: level,
+      clock: clock,
+      color: colors[index]
+    }, index))
+  });
+}
+function Bars({
+  width,
+  height,
+  level,
+  colors,
+  still
+}) {
+  const history = useSharedValue(new Array(HISTORY).fill(0));
+  const last = useSharedValue(0);
+  const smooth = useSharedValue(0);
+  useFrameCallback(info => {
+    smooth.value += (level.value - smooth.value) * 0.35;
+    if (info.timestamp - last.value < PUSH_MS) return;
+    last.value = info.timestamp;
+    const next = history.value.slice(1);
+    next.push(smooth.value);
+    history.value = next;
+  }, !still);
+  const path = useDerivedValue(() => {
+    const bar = 3;
+    const gap = 3;
+    const count = Math.min(HISTORY, Math.floor((width + gap) / (bar + gap)));
+    const middle = height / 2;
+    const samples = still ? new Array(HISTORY).fill(level.value) : history.value;
+    const next = Skia.Path.Make();
+    for (let index = 0; index < count; index += 1) {
+      const sample = samples[HISTORY - count + index] ?? 0;
+      const h = Math.max(bar, sample * (height - 4));
+      const x = width - (count - index) * (bar + gap) + gap;
+      next.addRRect(Skia.RRectXY(Skia.XYWHRect(x, middle - h / 2, bar, h), bar / 2, bar / 2));
+    }
+    return next;
+  });
+  return /*#__PURE__*/_jsx(Path, {
+    path: path,
+    children: /*#__PURE__*/_jsx(LinearGradient, {
+      start: vec(0, 0),
+      end: vec(width, 0),
+      colors: [colors[0], colors[1], colors[2]]
+    })
+  });
+}
+function Dots({
+  width,
+  height,
+  level,
+  clock,
+  colors
+}) {
+  const path = useDerivedValue(() => {
+    const spacing = 11;
+    const count = Math.max(3, Math.floor(width / spacing));
+    const start = (width - (count - 1) * spacing) / 2;
+    const middle = height / 2;
+    const reach = middle - 4;
+    const t = clock.value * 0.006;
+    const next = Skia.Path.Make();
+    for (let index = 0; index < count; index += 1) {
+      const progress = index / (count - 1);
+      const envelope = Math.sin(Math.PI * progress);
+      const wave = Math.sin(t + index * 0.55) * Math.sin(t * 0.43 + index * 0.21);
+      const y = middle + wave * reach * envelope * (0.15 + level.value * 0.85);
+      const r = 1.6 + Math.abs(wave) * level.value * 1.8 * envelope;
+      next.addCircle(start + index * spacing, y, r);
+    }
+    return next;
+  });
+  return /*#__PURE__*/_jsx(Path, {
+    path: path,
+    children: /*#__PURE__*/_jsx(LinearGradient, {
+      start: vec(0, 0),
+      end: vec(width, 0),
+      colors: [colors[0], colors[1], colors[2]]
+    })
+  });
+}
+function Pulse({
+  width,
+  height,
+  level,
+  clock,
+  colors
+}) {
+  const path = useDerivedValue(() => {
+    const middle = height / 2;
+    const reach = middle - 3;
+    const t = clock.value * 0.004;
+    const next = Skia.Path.Make();
+    for (let x = 0; x <= width; x += 2) {
+      const progress = x / width;
+      const envelope = Math.pow(Math.sin(Math.PI * progress), 1.5);
+      const carrier = Math.sin(x * 0.21 - t * 5.2);
+      const burst = Math.pow(Math.abs(Math.sin(x * 0.027 + t * 1.7)), 3);
+      const y = middle + carrier * burst * envelope * reach * (0.08 + level.value * 0.92);
+      if (x === 0) next.moveTo(x, y);else next.lineTo(x, y);
+    }
+    return next;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Path, {
+      path: path,
+      style: "stroke",
+      strokeWidth: 5,
+      strokeCap: "round",
+      strokeJoin: "round",
+      color: colors[1],
+      opacity: 0.18
+    }), /*#__PURE__*/_jsx(Path, {
+      path: path,
+      style: "stroke",
+      strokeWidth: 1.8,
+      strokeCap: "round",
+      strokeJoin: "round",
+      children: /*#__PURE__*/_jsx(LinearGradient, {
+        start: vec(0, 0),
+        end: vec(width, 0),
+        colors: [colors[0], colors[2], colors[0]]
+      })
+    })]
+  });
+}
+export function VoiceWave({
+  level,
+  colors,
+  variant = "lines",
+  height = DEFAULT_HEIGHT,
+  style
+}) {
+  const [width, setWidth] = useState(0);
+  const reduceMotion = useReducedMotion();
+  const ticking = useClock();
+  const clock = useDerivedValue(() => reduceMotion ? 1200 : ticking.value, [reduceMotion]);
+  const handleLayout = event => setWidth(event.nativeEvent.layout.width);
+  const props = {
+    width,
+    height,
+    level,
+    clock,
+    colors,
+    still: reduceMotion
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      flex: 1,
+      height
+    }, style],
+    onLayout: handleLayout,
+    children: width > 0 ? /*#__PURE__*/_jsx(Canvas, {
+      style: {
+        width,
+        height
+      },
+      children: variant === "bars" ? /*#__PURE__*/_jsx(Bars, {
+        ...props
+      }) : variant === "dots" ? /*#__PURE__*/_jsx(Dots, {
+        ...props
+      }) : variant === "pulse" ? /*#__PURE__*/_jsx(Pulse, {
+        ...props
+      }) : /*#__PURE__*/_jsx(Lines, {
+        width: width,
+        height: height,
+        level: level,
+        clock: clock,
+        colors: colors
+      })
+    }) : null
+  });
+}
+export function VoiceWaveLines(props) {
+  return /*#__PURE__*/_jsx(VoiceWave, {
+    ...props,
+    variant: "lines"
+  });
+}
+export function VoiceWaveBars(props) {
+  return /*#__PURE__*/_jsx(VoiceWave, {
+    ...props,
+    variant: "bars"
+  });
+}
+export function VoiceWaveDots(props) {
+  return /*#__PURE__*/_jsx(VoiceWave, {
+    ...props,
+    variant: "dots"
+  });
+}
+export function VoiceWavePulse(props) {
+  return /*#__PURE__*/_jsx(VoiceWave, {
+    ...props,
+    variant: "pulse"
+  });
+}
+//# sourceMappingURL=voice-wave.js.map

package/lib/module/skia/voice-wave.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Canvas","LinearGradient","Path","Skia","useClock","vec","useState","View","useDerivedValue","useFrameCallback","useReducedMotion","useSharedValue","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DEFAULT_HEIGHT","SAMPLE_STEP","MIN_AMPLITUDE","EDGE_PADDING","HISTORY","PUSH_MS","LAYERS","frequency","speed","phase","amplitude","strokeWidth","opacity","WaveLayerPath","layer","width","height","level","clock","color","path","middle","reach","value","offset","next","Make","x","progress","envelope","Math","sin","PI","y","moveTo","lineTo","style","strokeCap","strokeJoin","Lines","colors","children","map","index","Bars","still","history","Array","fill","last","smooth","info","timestamp","slice","push","bar","gap","count","min","floor","samples","sample","h","max","addRRect","RRectXY","XYWHRect","start","end","Dots","spacing","t","wave","r","abs","addCircle","Pulse","pow","carrier","burst","VoiceWave","variant","setWidth","reduceMotion","ticking","handleLayout","event","nativeEvent","layout","props","flex","onLayout","VoiceWaveLines","VoiceWaveBars","VoiceWaveDots","VoiceWavePulse"],"sourceRoot":"../../../src","sources":["skia/voice-wave.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/text/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { ShimmerText } from "./shimmer-text.js";
+export { StreamingText } from "./streaming-text.js";
+export { SpokenText } from "./spoken-text.js";
+//# sourceMappingURL=index.js.map

package/lib/module/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ShimmerText","StreamingText","SpokenText"],"sourceRoot":"../../../src","sources":["text/index.ts"],"mappings":";;AAAA,SAASA,WAAW,QAA+B,mBAAgB;AACnE,SAASC,aAAa,QAAiC,qBAAkB;AACzE,SAASC,UAAU,QAA8B,kBAAe","ignoreList":[]}

package/lib/module/text/shimmer-text.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { useEffect, useMemo } from "react";
+import { Text, View } from "react-native";
+import Animated, { Easing, Extrapolation, interpolate, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_DURATION = 1400;
+const DEFAULT_HIGHLIGHT_WIDTH = 0.22;
+const GLYPH_BLEED = {
+  paddingHorizontal: 2,
+  marginHorizontal: -2
+};
+const DEFAULT_TEXT_STYLE = {
+  fontSize: 14,
+  fontWeight: "500",
+  lineHeight: 20
+};
+export function ShimmerText({
+  text,
+  activeColor,
+  mutedColor,
+  textStyle = DEFAULT_TEXT_STYLE,
+  duration = DEFAULT_DURATION,
+  highlightWidth = DEFAULT_HIGHLIGHT_WIDTH,
+  pause = 0,
+  direction = "ltr"
+}) {
+  const reduceMotion = useReducedMotion();
+  const progress = useSharedValue(0);
+  const {
+    words,
+    total
+  } = useMemo(() => {
+    const characters = Array.from(text);
+    const groups = [];
+    let current = [];
+    characters.forEach((char, index) => {
+      current.push({
+        char,
+        index
+      });
+      if (char === " ") {
+        groups.push(current);
+        current = [];
+      }
+    });
+    if (current.length) groups.push(current);
+    return {
+      words: groups,
+      total: characters.length
+    };
+  }, [text]);
+  useEffect(() => {
+    if (reduceMotion) return;
+    progress.value = 0;
+    const sweep = withTiming(1, {
+      duration,
+      easing: Easing.linear
+    });
+    progress.value = withRepeat(pause > 0 ? withSequence(sweep, withDelay(pause, withTiming(0, {
+      duration: 0
+    }))) : sweep, -1, false);
+  }, [duration, pause, progress, reduceMotion]);
+  if (reduceMotion) {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [textStyle, {
+        color: activeColor
+      }],
+      children: text
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: text,
+    style: {
+      flexDirection: "row",
+      flexWrap: "wrap"
+    },
+    children: words.map((word, wordIndex) => /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: "row"
+      },
+      children: word.map(glyph => /*#__PURE__*/_jsx(ShimmerChar, {
+        char: glyph.char,
+        index: direction === "rtl" ? total - 1 - glyph.index : glyph.index,
+        total: total,
+        progress: progress,
+        activeColor: activeColor,
+        mutedColor: mutedColor,
+        textStyle: textStyle,
+        highlightWidth: highlightWidth
+      }, glyph.index))
+    }, wordIndex))
+  });
+}
+function ShimmerChar({
+  char,
+  index,
+  total,
+  progress,
+  activeColor,
+  mutedColor,
+  textStyle,
+  highlightWidth
+}) {
+  const style = useAnimatedStyle(() => {
+    const phase = total > 1 ? index / (total - 1) : 0;
+    const position = -highlightWidth + progress.value * (1 + highlightWidth * 2);
+    const distance = Math.abs(position - phase);
+    const linear = interpolate(distance, [0, highlightWidth], [0, 1], Extrapolation.CLAMP);
+    const t = linear * linear * (3 - 2 * linear);
+    return {
+      color: interpolateColor(t, [0, 1], [activeColor, mutedColor])
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.Text, {
+    style: [textStyle, GLYPH_BLEED, style],
+    children: char
+  });
+}
+//# sourceMappingURL=shimmer-text.js.map

package/lib/module/text/shimmer-text.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","Text","View","Animated","Easing","Extrapolation","interpolate","interpolateColor","useAnimatedStyle","useReducedMotion","useSharedValue","withDelay","withRepeat","withSequence","withTiming","jsx","_jsx","DEFAULT_DURATION","DEFAULT_HIGHLIGHT_WIDTH","GLYPH_BLEED","paddingHorizontal","marginHorizontal","DEFAULT_TEXT_STYLE","fontSize","fontWeight","lineHeight","ShimmerText","text","activeColor","mutedColor","textStyle","duration","highlightWidth","pause","direction","reduceMotion","progress","words","total","characters","Array","from","groups","current","forEach","char","index","push","length","value","sweep","easing","linear","style","color","children","accessible","accessibilityRole","accessibilityLabel","flexDirection","flexWrap","map","word","wordIndex","glyph","ShimmerChar","phase","position","distance","Math","abs","CLAMP","t"],"sourceRoot":"../../../src","sources":["text/shimmer-text.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/text/spoken-text.js

@@ -0,0 +1,85 @@
+"use strict";
+
+import { memo, useEffect, useMemo } from "react";
+import { Text, View } from "react-native";
+import Animated, { interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useMotionPalette } from "../theme/provider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_TEXT_STYLE = {
+  fontSize: 22,
+  lineHeight: 30,
+  fontWeight: "600"
+};
+export function SpokenText({
+  text,
+  spoken,
+  textStyle = DEFAULT_TEXT_STYLE,
+  activeColor,
+  spokenColor,
+  upcomingColor,
+  align = "center",
+  colors,
+  style
+}) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const words = useMemo(() => text.match(/\S+\s*/g) ?? [], [text]);
+  const active = activeColor ?? palette.text;
+  const done = spokenColor ?? palette.textSecondary;
+  const upcoming = upcomingColor ?? palette.textTertiary;
+  const current = Math.min(words.length, Math.max(0, Math.floor(spoken)));
+  if (reduceMotion) {
+    return /*#__PURE__*/_jsx(Text, {
+      accessibilityLabel: text,
+      style: [textStyle, {
+        color: active,
+        textAlign: align
+      }, style],
+      children: text
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: text,
+    style: [{
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: align === "center" ? "center" : "flex-start"
+    }, style],
+    children: words.map((word, index) => /*#__PURE__*/_jsx(SpokenWord, {
+      word: word,
+      phase: index < current ? 2 : index === current ? 1 : 0,
+      textStyle: textStyle,
+      active: active,
+      done: done,
+      upcoming: upcoming
+    }, index))
+  });
+}
+const SpokenWord = /*#__PURE__*/memo(function SpokenWord({
+  word,
+  phase,
+  textStyle,
+  active,
+  done,
+  upcoming
+}) {
+  const value = useSharedValue(phase);
+  useEffect(() => {
+    value.value = withTiming(phase, {
+      duration: 180
+    });
+  }, [phase, value]);
+  const style = useAnimatedStyle(() => ({
+    color: interpolateColor(value.value, [0, 1, 2], [upcoming, active, done]),
+    transform: [{
+      translateY: -2 * Math.max(0, 1 - Math.abs(value.value - 1))
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.Text, {
+    style: [textStyle, style],
+    children: word
+  });
+});
+//# sourceMappingURL=spoken-text.js.map

package/lib/module/text/spoken-text.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useEffect","useMemo","Text","View","Animated","interpolateColor","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","useMotionPalette","jsx","_jsx","DEFAULT_TEXT_STYLE","fontSize","lineHeight","fontWeight","SpokenText","text","spoken","textStyle","activeColor","spokenColor","upcomingColor","align","colors","style","palette","reduceMotion","words","match","active","done","textSecondary","upcoming","textTertiary","current","Math","min","length","max","floor","accessibilityLabel","color","textAlign","children","accessible","accessibilityRole","flexDirection","flexWrap","justifyContent","map","word","index","SpokenWord","phase","value","duration","transform","translateY","abs"],"sourceRoot":"../../../src","sources":["text/spoken-text.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/text/streaming-text.js

@@ -0,0 +1,135 @@
+"use strict";
+
+import { isValidElement, memo, useEffect, useMemo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { useMotionPalette } from "../theme/provider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_TEXT_STYLE = {
+  fontSize: 16,
+  lineHeight: 24
+};
+const DEFAULT_FADE = 360;
+const DEFAULT_RISE = 6;
+const CARET_BLINK = 530;
+function tokenize(paragraph) {
+  const parts = paragraph.match(/\S+\s*/g) ?? [];
+  return parts.map((value, key) => ({
+    value,
+    key
+  }));
+}
+export function StreamingText({
+  text,
+  streaming,
+  textStyle = DEFAULT_TEXT_STYLE,
+  paragraphGap = 12,
+  fadeDuration = DEFAULT_FADE,
+  rise = DEFAULT_RISE,
+  caret = true,
+  colors,
+  style
+}) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const paragraphs = useMemo(() => text.split(/\n{2,}/), [text]);
+  const animate = streaming && !reduceMotion;
+  const color = palette.text;
+  const caretNode = caret === false ? null : /*#__PURE__*/isValidElement(caret) ? caret : /*#__PURE__*/_jsx(Caret, {
+    color: color,
+    blink: !reduceMotion,
+    textStyle: textStyle
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      gap: paragraphGap
+    }, style],
+    children: paragraphs.map((paragraph, index) => {
+      const last = index === paragraphs.length - 1;
+      if (!animate || !last) {
+        return /*#__PURE__*/_jsxs(Text, {
+          style: [textStyle, {
+            color
+          }],
+          children: [paragraph, last && streaming && caretNode]
+        }, index);
+      }
+      return /*#__PURE__*/_jsxs(View, {
+        accessible: true,
+        accessibilityRole: "text",
+        accessibilityLabel: paragraph,
+        style: {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "flex-end"
+        },
+        children: [tokenize(paragraph).map(token => /*#__PURE__*/_jsx(StreamingWord, {
+          value: token.value,
+          textStyle: textStyle,
+          color: color,
+          fadeDuration: fadeDuration,
+          rise: rise
+        }, token.key)), caretNode]
+      }, index);
+    })
+  });
+}
+const StreamingWord = /*#__PURE__*/memo(function StreamingWord({
+  value,
+  textStyle,
+  color,
+  fadeDuration,
+  rise
+}) {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    progress.value = withTiming(1, {
+      duration: fadeDuration,
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [fadeDuration, progress]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{
+      translateY: rise * (1 - progress.value)
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.Text, {
+    style: [textStyle, {
+      color
+    }, animatedStyle],
+    children: value
+  });
+});
+function Caret({
+  color,
+  blink,
+  textStyle
+}) {
+  const opacity = useSharedValue(1);
+  const flat = StyleSheet.flatten(textStyle);
+  const height = Math.round((flat?.fontSize ?? 16) * 1.05);
+  useEffect(() => {
+    if (!blink) return;
+    opacity.value = withRepeat(withSequence(withTiming(0, {
+      duration: CARET_BLINK
+    }), withTiming(1, {
+      duration: CARET_BLINK
+    })), -1, false);
+    return () => cancelAnimation(opacity);
+  }, [blink, opacity]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      width: 2,
+      height,
+      borderRadius: 1,
+      backgroundColor: color,
+      marginLeft: 2,
+      marginBottom: 3
+    }, animatedStyle]
+  });
+}
+//# sourceMappingURL=streaming-text.js.map