@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/RadialProgress.js

@@ -0,0 +1,864 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { Easing, cancelAnimation, useAnimatedProps, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { getSvg } from '../optional';
+import { PlayPauseIcon } from './PlayPauseIcon';
+
+/*
+ * The media button: a filled circle drawing a glyph and a progress arc. The geometry and
+ * timings below are specified in a 48-unit box.
+ */
+
+const svg = getSvg();
+const Svg = svg ? svg.Svg ?? svg.default : null;
+const AnimatedPath = svg?.Path ? Animated.createAnimatedComponent(svg.Path) : null;
+
+/** What the button shows. */
+
+const PLAY = 0;
+const PAUSE = 1;
+const DOWNLOAD = 2;
+const CANCEL = 3;
+const NONE = 4;
+const ICON_CODES = {
+  play: PLAY,
+  pause: PAUSE,
+  download: DOWNLOAD,
+  cancel: CANCEL,
+  none: NONE
+};
+
+/** The drawable's own size; everything scales by `size / 48`. */
+const INTRINSIC = 48;
+
+/** Download -> cancel runs in three stages. */
+const STAGE1 = 0.5;
+const STAGE2 = 0.2;
+const STAGE3 = 0.3;
+
+/** The arc turns once every 2.5s. */
+export const RADIAL_SPIN_MS = 2500;
+/** And starts at 112 degrees whenever the cancel icon is set. */
+const RAD_OFFSET_START = 112;
+/** Progress eases toward its target over 200ms, decelerating. */
+export const RADIAL_PROGRESS_MS = 200;
+const DECELERATE = Easing.out(Easing.quad);
+
+/** The transition length for a pair of icons. */
+export const transitionDuration = (from, to) => {
+  if (from === 'play' && to === 'pause' || from === 'pause' && to === 'play') return 300;
+  if (from === 'download' && to === 'cancel') return 400;
+  return 220;
+};
+
+/** Restarts the ring's turn from 112 degrees. */
+const spinRing = rad => {
+  rad.value = RAD_OFFSET_START;
+  rad.value = withRepeat(withTiming(RAD_OFFSET_START + 360, {
+    duration: RADIAL_SPIN_MS,
+    easing: Easing.linear
+  }), -1, false);
+};
+const isPlayPause = icon => {
+  'worklet';
+
+  return icon === PLAY || icon === PAUSE;
+};
+const f = value => {
+  'worklet';
+
+  return Math.round(value * 100) / 100;
+};
+
+/** An SVG elliptical arc, Android's `drawArc(rect, start, sweep)`: degrees, clockwise from 3 o'clock. */
+export const arcPath = (cx, cy, rx, ry, start, sweep) => {
+  'worklet';
+
+  if (Math.abs(sweep) < 0.01) return '';
+
+  // Two halves, so a full ring never has its ends land on the same point (which SVG
+  // draws as nothing, or a dot with round caps).
+  const clamped = Math.max(-360, Math.min(360, sweep));
+  const point = deg => {
+    const a = deg * Math.PI / 180;
+    return `${f(cx + rx * Math.cos(a))} ${f(cy + ry * Math.sin(a))}`;
+  };
+  const dir = clamped > 0 ? 1 : 0;
+  const mid = start + clamped / 2;
+  return `M${point(start)} A${f(rx)} ${f(ry)} 0 0 ${dir} ${point(mid)} ` + `A${f(rx)} ${f(ry)} 0 0 ${dir} ${point(start + clamped)} `;
+};
+const line = (x1, y1, x2, y2) => {
+  'worklet';
+
+  return `M${f(x1)} ${f(y1)} L${f(x2)} ${f(y2)} `;
+};
+
+/** The two strokes of an ✕ of half-size `d`, scaled by `k` and turned `deg` about the centre. */
+const crossLines = (c, d, k, deg) => {
+  'worklet';
+
+  if (d <= 0 || k <= 0) return [];
+  const r = deg * Math.PI / 180;
+  const cos = Math.cos(r) * k;
+  const sin = Math.sin(r) * k;
+  const p = (x, y) => [c + x * cos - y * sin, c + x * sin + y * cos];
+  return [...p(-d, -d), ...p(d, d), ...p(d, -d), ...p(-d, d)];
+};
+const cross = (c, d, k, deg) => {
+  'worklet';
+
+  if (d <= 0 || k <= 0) return '';
+  const r = deg * Math.PI / 180;
+  const cos = Math.cos(r) * k;
+  const sin = Math.sin(r) * k;
+  const p = (x, y) => [c + x * cos - y * sin, c + x * sin + y * cos];
+  const [ax, ay] = p(-d, -d);
+  const [bx, by] = p(d, d);
+  const [cx2, cy2] = p(d, -d);
+  const [dx, dy] = p(-d, d);
+  return line(ax, ay, bx, by) + line(cx2, cy2, dx, dy);
+};
+/**
+ * One frame of the media action icon for a drawable `size` across. `t` is
+ * `transitionProgress` (1 at rest), `saved` the `savedTransitionProgress` the transition
+ * started from, `progress` the eased `animatedDownloadProgress` and `rad` the arc's
+ * `downloadRadOffset`.
+ */
+export const radialFrame = (current, next, t, saved, progress, rad, size, isMini) => {
+  'worklet';
+
+  const scale = size / INTRINSIC;
+  const c = size / 2;
+  const animating = current !== next && t < 1;
+  const out = {
+    arrow: '',
+    arrowAlpha: 0,
+    cross: '',
+    crossAlpha: 0,
+    arc: '',
+    arcAlpha: 0,
+    glyphScale: 0,
+    glyphAlpha: 0,
+    arrowLines: [],
+    crossLines: [],
+    arcStart: 0,
+    arcSweep: 0,
+    arcRadius: 0
+  };
+
+  // The download arrow.
+  if (current === DOWNLOAD || next === DOWNLOAD) {
+    const yStart = c - 9 * scale;
+    const yEnd = c + 9 * scale;
+    const yEnd2 = c + 12 * scale;
+    let yStart2;
+    let transition;
+    if (current === CANCEL && next === DOWNLOAD) {
+      out.arrowAlpha = Math.min(1, t / 0.5);
+      transition = t;
+      yStart2 = c + 12 * scale;
+    } else {
+      if (next !== CANCEL && next !== DOWNLOAD) {
+        out.arrowAlpha = Math.min(1, saved / 0.5) * (1 - t);
+        transition = saved;
+      } else {
+        out.arrowAlpha = 1;
+        transition = t;
+      }
+      yStart2 = c + 1 * scale;
+    }
+    let y1;
+    let y2;
+    let x1;
+    let x2;
+    let y3;
+    if (animating) {
+      let p = transition;
+      if (next === DOWNLOAD || p <= STAGE1) {
+        let cur;
+        let back;
+        if (next === DOWNLOAD) {
+          back = transition;
+          cur = 1 - back;
+        } else {
+          cur = transition / STAGE1;
+          back = 1 - cur;
+        }
+        y1 = yStart + (yStart2 - yStart) * cur;
+        y2 = yEnd + (yEnd2 - yEnd) * cur;
+        x1 = c - 8 * back * scale;
+        x2 = c + 8 * back * scale;
+        y3 = y2 - 8 * back * scale;
+      } else {
+        // The stem curls into the start of the ring, then the ✕ turns in.
+        let d = 13 * scale * scale + (isMini ? 2 : 0);
+        p -= STAGE1;
+        const p3 = p / (STAGE2 + STAGE3);
+        let p1;
+        let p2;
+        if (p > STAGE2) {
+          p1 = 1;
+          p2 = (p - STAGE2) / STAGE3;
+        } else {
+          p1 = p / STAGE2;
+          p2 = 0;
+        }
+        const start = 100 * p2;
+        out.arrow += arcPath(c - d / 2, yEnd2, d / 2, d / 2, start, 104 * p3 - start);
+        y1 = yStart2 + (yEnd2 - yStart2) * p1;
+        y2 = y3 = yEnd2;
+        x1 = x2 = c;
+        if (p2 > 0) {
+          d = 7 * p2 * scale;
+          out.cross = cross(c, d, 1, -45 * (1 - p2));
+          out.crossLines = crossLines(c, d, 1, -45 * (1 - p2));
+          out.crossAlpha = p2;
+        }
+      }
+    } else {
+      y1 = yStart;
+      y2 = yEnd;
+      x1 = c - 8 * scale;
+      x2 = c + 8 * scale;
+      y3 = y2 - 8 * scale;
+    }
+    if (y1 !== y2) {
+      out.arrow += line(c, y1, c, y2);
+      out.arrowLines.push(c, y1, c, y2);
+    }
+    if (x1 !== c) {
+      out.arrow += line(x1, y3, c, y2) + line(x2, y3, c, y2);
+      out.arrowLines.push(x1, y3, c, y2, x2, y3, c, y2);
+    }
+  }
+
+  // The cancel ✕ and the progress ring.
+  if (current === CANCEL || current === NONE && next === CANCEL) {
+    let d;
+    let rotation = 0;
+    let iconScale = 1;
+    let alpha;
+    if (next === DOWNLOAD) {
+      if (t <= STAGE3 + STAGE2) {
+        const back = 1 - t / (STAGE3 + STAGE2);
+        d = 7 * back * scale;
+        alpha = back;
+      } else {
+        d = 0;
+        alpha = 0;
+      }
+    } else if (isPlayPause(next)) {
+      const back = 1 - t;
+      iconScale = 1 - t;
+      d = 7 * back * scale;
+      alpha = Math.min(1, back * 2);
+    } else if (next === NONE) {
+      const back = 1 - t;
+      d = 7 * scale;
+      alpha = back;
+      iconScale = back;
+    } else if (next === CANCEL) {
+      if (current === NONE) iconScale = t;else rotation = 45 * (1 - t);
+      d = 7 * scale;
+      alpha = t;
+    } else {
+      d = 7 * scale;
+      alpha = 1;
+    }
+    if (current === next) {
+      rotation = 0;
+      iconScale = 1;
+      alpha = 1;
+      d = 7 * scale;
+    }
+    out.cross = cross(c, d, iconScale, rotation);
+    out.crossLines = crossLines(c, d, iconScale, rotation);
+    out.crossAlpha = alpha;
+    if (alpha > 0) {
+      // At least 4 degrees, so a download that has not started still shows a dot.
+      const sweep = Math.max(4, 360 * progress);
+      const inset = isMini ? 2 : 4;
+      const r = c - inset;
+      out.arc = arcPath(c, c, r, r, rad, sweep);
+      out.arcAlpha = alpha;
+      out.arcStart = rad;
+      out.arcSweep = sweep;
+      out.arcRadius = r;
+    }
+  }
+
+  // Play / pause, drawn by `PlayPauseIcon`; here only how much of it shows.
+  if (isPlayPause(current) || isPlayPause(next)) if (isPlayPause(current) && isPlayPause(next)) {
+    out.glyphScale = 1;
+    out.glyphAlpha = 1;
+  } else if (isPlayPause(next)) {
+    out.glyphAlpha = animating ? t : 1;
+    // From the cancel ✕ it grows from nothing; from the arrow it is full size at half way.
+    out.glyphScale = !animating ? 1 : current === NONE || current === CANCEL ? t : Math.min(1, t / 0.5);
+  } else {
+    out.glyphAlpha = animating ? 1 - t : 0;
+    out.glyphScale = animating ? Math.max(0, 1 - t / 0.5) : 0;
+  }
+  return out;
+};
+
+/** One straight stroke of the frame with round caps, for drawing without react-native-svg. */
+function FallbackStroke(t0) {
+  const $ = _c(7);
+  const {
+    frame,
+    isCross,
+    index,
+    color,
+    width
+  } = t0;
+  const style = useAnimatedStyle(() => {
+    const lines = isCross ? frame.value.crossLines : frame.value.arrowLines;
+    const i = index * 4;
+    if (lines.length < i + 4) {
+      return {
+        opacity: 0,
+        width: 0
+      };
+    }
+    const x1 = lines[i];
+    const y1 = lines[i + 1];
+    const x2 = lines[i + 2];
+    const y2 = lines[i + 3];
+    const length = Math.hypot(x2 - x1, y2 - y1) + width;
+    return {
+      opacity: isCross ? frame.value.crossAlpha : frame.value.arrowAlpha,
+      width: length,
+      left: (x1 + x2) / 2 - length / 2,
+      top: (y1 + y2) / 2 - width / 2,
+      transform: [{
+        rotate: `${Math.atan2(y2 - y1, x2 - x1)}rad`
+      }]
+    };
+  });
+  const t1 = width / 2;
+  let t2;
+  if ($[0] !== color || $[1] !== t1 || $[2] !== width) {
+    t2 = {
+      height: width,
+      borderRadius: t1,
+      backgroundColor: color
+    };
+    $[0] = color;
+    $[1] = t1;
+    $[2] = width;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== style || $[5] !== t2) {
+    t3 = <Animated.View style={[styles.stroke, t2, style]} />;
+    $[4] = style;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+/**
+ * The progress arc without react-native-svg: two half rings, each clipped to its half of the
+ * circle and turned in from the other side, and the whole turned to the arc's start.
+ */
+function FallbackRing(t0) {
+  const $ = _c(38);
+  const {
+    frame,
+    color,
+    width,
+    size,
+    isMini
+  } = t0;
+  const radius = size / 2 - (isMini ? 2 : 4);
+  const diameter = radius * 2 + width;
+  const offset = size / 2 - diameter / 2;
+  const ringStyle = useAnimatedStyle(() => ({
+    opacity: frame.value.arcAlpha,
+    transform: [{
+      rotate: `${frame.value.arcStart + 90}deg`
+    }]
+  }));
+  const firstHalfStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${45 + Math.min(frame.value.arcSweep, 180) - 180}deg`
+    }]
+  }));
+  const secondHalfStyle = useAnimatedStyle(() => ({
+    opacity: frame.value.arcSweep > 180 ? 1 : 0,
+    transform: [{
+      rotate: `${45 + Math.max(frame.value.arcSweep, 180) - 180}deg`
+    }]
+  }));
+  const t1 = diameter / 2;
+  let t2;
+  if ($[0] !== color || $[1] !== diameter || $[2] !== t1 || $[3] !== width) {
+    t2 = {
+      width: diameter,
+      height: diameter,
+      borderRadius: t1,
+      borderWidth: width,
+      borderTopColor: color,
+      borderRightColor: color,
+      borderBottomColor: "transparent",
+      borderLeftColor: "transparent"
+    };
+    $[0] = color;
+    $[1] = diameter;
+    $[2] = t1;
+    $[3] = width;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const halfRing = t2;
+  let t3;
+  if ($[5] !== diameter || $[6] !== offset) {
+    t3 = {
+      left: offset,
+      top: offset,
+      width: diameter,
+      height: diameter
+    };
+    $[5] = diameter;
+    $[6] = offset;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== ringStyle || $[9] !== t3) {
+    t4 = [styles.ring, t3, ringStyle];
+    $[8] = ringStyle;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const t5 = diameter / 2;
+  const t6 = diameter / 2;
+  let t7;
+  if ($[11] !== diameter || $[12] !== t5 || $[13] !== t6) {
+    t7 = [styles.half, {
+      left: t5,
+      width: t6,
+      height: diameter
+    }];
+    $[11] = diameter;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  const t8 = -diameter / 2;
+  let t9;
+  if ($[15] !== t8) {
+    t9 = {
+      left: t8
+    };
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] !== firstHalfStyle || $[18] !== halfRing || $[19] !== t9) {
+    t10 = <Animated.View style={[styles.halfRing, halfRing, t9, firstHalfStyle]} />;
+    $[17] = firstHalfStyle;
+    $[18] = halfRing;
+    $[19] = t9;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== t10 || $[22] !== t7) {
+    t11 = <View style={t7}>{t10}</View>;
+    $[21] = t10;
+    $[22] = t7;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  const t12 = diameter / 2;
+  let t13;
+  if ($[24] !== diameter || $[25] !== t12) {
+    t13 = [styles.half, {
+      left: 0,
+      width: t12,
+      height: diameter
+    }];
+    $[24] = diameter;
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      left: 0
+    };
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  let t15;
+  if ($[28] !== halfRing || $[29] !== secondHalfStyle) {
+    t15 = <Animated.View style={[styles.halfRing, halfRing, t14, secondHalfStyle]} />;
+    $[28] = halfRing;
+    $[29] = secondHalfStyle;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  let t16;
+  if ($[31] !== t13 || $[32] !== t15) {
+    t16 = <View style={t13}>{t15}</View>;
+    $[31] = t13;
+    $[32] = t15;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  let t17;
+  if ($[34] !== t11 || $[35] !== t16 || $[36] !== t4) {
+    t17 = <Animated.View style={t4}>{t11}{t16}</Animated.View>;
+    $[34] = t11;
+    $[35] = t16;
+    $[36] = t4;
+    $[37] = t17;
+  } else {
+    t17 = $[37];
+  }
+  return t17;
+}
+/**
+ * The media button: a filled circle with a
+ * play, pause, download or cancel glyph, and while cancelable a ring that grows with
+ * `progress` and turns once every 2.5s. Every animation runs on the UI thread.
+ */
+export function RadialProgress(t0) {
+  const $ = _c(58);
+  const {
+    icon,
+    progress: t1,
+    size: t2,
+    color,
+    backgroundColor,
+    isMini: t3,
+    glyphSize,
+    style
+  } = t0;
+  const progress = t1 === undefined ? 0 : t1;
+  const size = t2 === undefined ? 44 : t2;
+  const isMini = t3 === undefined ? false : t3;
+  const code = ICON_CODES[icon];
+  const current = useSharedValue(code);
+  const next = useSharedValue(code);
+  const t = useSharedValue(1);
+  const saved = useSharedValue(1);
+  const arc = useSharedValue(0);
+  const target = useSharedValue(typeof progress === "number" ? progress : 0);
+  const rad = useSharedValue(RAD_OFFSET_START);
+  const previousIcon = useRef(icon);
+  const fallbackProgress = useSharedValue(0);
+  const progressSource = typeof progress === "number" ? fallbackProgress : progress;
+  const numericProgress = typeof progress === "number" ? progress : null;
+  const [initialIcon] = useState(icon);
+  let t4;
+  let t5;
+  if ($[0] !== initialIcon || $[1] !== rad) {
+    t4 = () => {
+      if (initialIcon === "cancel") {
+        spinRing(rad);
+      }
+      return () => cancelAnimation(rad);
+    };
+    t5 = [initialIcon, rad];
+    $[0] = initialIcon;
+    $[1] = rad;
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t4 = $[2];
+    t5 = $[3];
+  }
+  useEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[4] !== arc || $[5] !== current || $[6] !== icon || $[7] !== next || $[8] !== rad || $[9] !== saved || $[10] !== t) {
+    t6 = () => {
+      const from = previousIcon.current;
+      if (from === icon) {
+        return;
+      }
+      previousIcon.current = icon;
+      const duration = transitionDuration(from, icon);
+      if (t.value < 1) {
+        current.value = next.value;
+      }
+      saved.value = t.value;
+      next.value = ICON_CODES[icon];
+      if (icon === "cancel") {
+        arc.value = 0;
+        spinRing(rad);
+      }
+      t.value = 0;
+      t.value = withTiming(1, {
+        duration,
+        easing: Easing.linear
+      }, finished => {
+        if (!finished) {
+          return;
+        }
+        current.value = next.value;
+        if (next.value !== CANCEL) {
+          cancelAnimation(rad);
+        }
+      });
+    };
+    t7 = [icon, arc, current, next, rad, saved, t];
+    $[4] = arc;
+    $[5] = current;
+    $[6] = icon;
+    $[7] = next;
+    $[8] = rad;
+    $[9] = saved;
+    $[10] = t;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t6 = $[11];
+    t7 = $[12];
+  }
+  useEffect(t6, t7);
+  let t8;
+  let t9;
+  if ($[13] !== numericProgress || $[14] !== target) {
+    t8 = () => {
+      if (numericProgress != null) {
+        target.value = numericProgress;
+      }
+    };
+    t9 = [numericProgress, target];
+    $[13] = numericProgress;
+    $[14] = target;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t8 = $[15];
+    t9 = $[16];
+  }
+  useEffect(t8, t9);
+  useAnimatedReaction(() => progressSource.value, value => {
+    if (numericProgress == null) {
+      target.set(value);
+    }
+  });
+  useAnimatedReaction(() => target.value, value_0 => {
+    if (value_0 <= arc.get()) {
+      cancelAnimation(arc);
+      arc.set(value_0);
+      return;
+    }
+    arc.set(withTiming(value_0, {
+      duration: RADIAL_PROGRESS_MS,
+      easing: DECELERATE
+    }));
+  });
+  const frame = useDerivedValue(() => radialFrame(current.value, next.value, t.value, saved.value, arc.value, rad.value, size, isMini));
+  const arrowProps = useAnimatedProps(() => {
+    const r = frame.value;
+    return {
+      d: r.arrow || "M0 0",
+      opacity: r.arrowAlpha
+    };
+  });
+  const crossProps = useAnimatedProps(() => {
+    const r_0 = frame.value;
+    return {
+      d: r_0.cross || "M0 0",
+      opacity: r_0.crossAlpha
+    };
+  });
+  const arcProps = useAnimatedProps(() => {
+    const r_1 = frame.value;
+    return {
+      d: r_1.arc || "M0 0",
+      opacity: r_1.arcAlpha
+    };
+  });
+  const glyphStyle = useAnimatedStyle(() => {
+    const result = radialFrame(current.value, next.value, t.value, saved.value, 0, 0, size, isMini);
+    return {
+      opacity: result.glyphAlpha,
+      transform: [{
+        scale: result.glyphScale
+      }]
+    };
+  });
+  const circleStyle = useAnimatedStyle(() => {
+    const isAnimating = current.value !== next.value && t.value < 1;
+    if (!isAnimating) {
+      return {
+        opacity: next.value === NONE ? 0 : 1
+      };
+    }
+    if (current.value === NONE) {
+      return {
+        opacity: t.value
+      };
+    }
+    return {
+      opacity: next.value === NONE ? 1 - t.value : 1
+    };
+  });
+  const strokeWidth = isMini || size / INTRINSIC < 0.7 ? 2 : 3;
+  const t10 = size / 2;
+  let t11;
+  if ($[17] !== size || $[18] !== t10) {
+    t11 = {
+      width: size,
+      height: size,
+      borderRadius: t10
+    };
+    $[17] = size;
+    $[18] = t10;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  const circle = t11;
+  let t12;
+  if ($[20] !== glyphSize || $[21] !== size) {
+    t12 = glyphSize ?? Math.round(18 * size / 44);
+    $[20] = glyphSize;
+    $[21] = size;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  const glyph = t12;
+  let t13;
+  if ($[23] !== circle || $[24] !== style) {
+    t13 = [styles.root, circle, style];
+    $[23] = circle;
+    $[24] = style;
+    $[25] = t13;
+  } else {
+    t13 = $[25];
+  }
+  let t14;
+  if ($[26] !== backgroundColor || $[27] !== circleStyle || $[28] !== size) {
+    t14 = backgroundColor != null && <Animated.View style={[StyleSheet.absoluteFill, {
+      backgroundColor,
+      borderRadius: size / 2
+    }, circleStyle]} />;
+    $[26] = backgroundColor;
+    $[27] = circleStyle;
+    $[28] = size;
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  let t15;
+  if ($[30] !== glyphStyle) {
+    t15 = [StyleSheet.absoluteFill, styles.center, glyphStyle];
+    $[30] = glyphStyle;
+    $[31] = t15;
+  } else {
+    t15 = $[31];
+  }
+  const t16 = icon === "pause";
+  let t17;
+  if ($[32] !== color || $[33] !== glyph || $[34] !== t16) {
+    t17 = <PlayPauseIcon isPlaying={t16} color={color} size={glyph} />;
+    $[32] = color;
+    $[33] = glyph;
+    $[34] = t16;
+    $[35] = t17;
+  } else {
+    t17 = $[35];
+  }
+  let t18;
+  if ($[36] !== t15 || $[37] !== t17) {
+    t18 = <Animated.View style={t15}>{t17}</Animated.View>;
+    $[36] = t15;
+    $[37] = t17;
+    $[38] = t18;
+  } else {
+    t18 = $[38];
+  }
+  let t19;
+  if ($[39] !== arcProps || $[40] !== arrowProps || $[41] !== color || $[42] !== crossProps || $[43] !== size || $[44] !== strokeWidth) {
+    t19 = Svg && AnimatedPath && <Svg width={size} height={size} style={StyleSheet.absoluteFill}><AnimatedPath animatedProps={arrowProps} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" fill="none" /><AnimatedPath animatedProps={crossProps} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" fill="none" /><AnimatedPath animatedProps={arcProps} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" fill="none" /></Svg>;
+    $[39] = arcProps;
+    $[40] = arrowProps;
+    $[41] = color;
+    $[42] = crossProps;
+    $[43] = size;
+    $[44] = strokeWidth;
+    $[45] = t19;
+  } else {
+    t19 = $[45];
+  }
+  let t20;
+  if ($[46] !== color || $[47] !== frame || $[48] !== isMini || $[49] !== size || $[50] !== strokeWidth) {
+    t20 = !Svg && <><FallbackRing frame={frame} color={color} width={strokeWidth} size={size} isMini={isMini} />{[0, 1, 2].map(index => <FallbackStroke key={`arrow${index}`} frame={frame} isCross={false} index={index} color={color} width={strokeWidth} />)}{[0, 1].map(index_0 => <FallbackStroke key={`cross${index_0}`} frame={frame} isCross={true} index={index_0} color={color} width={strokeWidth} />)}</>;
+    $[46] = color;
+    $[47] = frame;
+    $[48] = isMini;
+    $[49] = size;
+    $[50] = strokeWidth;
+    $[51] = t20;
+  } else {
+    t20 = $[51];
+  }
+  let t21;
+  if ($[52] !== t13 || $[53] !== t14 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20) {
+    t21 = <View pointerEvents="none" style={t13}>{t14}{t18}{t19}{t20}</View>;
+    $[52] = t13;
+    $[53] = t14;
+    $[54] = t18;
+    $[55] = t19;
+    $[56] = t20;
+    $[57] = t21;
+  } else {
+    t21 = $[57];
+  }
+  return t21;
+}
+const styles = StyleSheet.create({
+  root: {
+    overflow: 'hidden'
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  stroke: {
+    position: 'absolute'
+  },
+  ring: {
+    position: 'absolute'
+  },
+  half: {
+    position: 'absolute',
+    top: 0,
+    overflow: 'hidden'
+  },
+  halfRing: {
+    position: 'absolute',
+    top: 0
+  }
+});
+//# sourceMappingURL=RadialProgress.js.map