@kesha-antonov/react-native-chat 5.0.1 → 6.0.1

package/lib/components/Ticks.js

@@ -1,102 +1,292 @@
+import { c as _c } from "react/compiler-runtime";
 import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Animated, { Easing, ReduceMotion, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Animated, { Easing, ReduceMotion, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 /**
  * A single checkmark drawn with two borders rotated 45deg - no SVG dependency.
  * Replaces the old literal "✓" glyph so the tick is crisp at any size and color.
  */
-const Check = ({ color, size, style }) => {
-    const styles = useMemo(() => createCheckStyles(color, size), [color, size]);
-    return <View style={[styles.check, style]}/>;
+const Check = t0 => {
+  const $ = _c(6);
+  const {
+    color,
+    size,
+    style
+  } = t0;
+  let t1;
+  if ($[0] !== color || $[1] !== size) {
+    t1 = createCheckStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const styles = t1;
+  let t2;
+  if ($[3] !== style || $[4] !== styles.check) {
+    t2 = <View style={[styles.check, style]} />;
+    $[3] = style;
+    $[4] = styles.check;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 };
 /**
- * Telegram-style delivery ticks: one check = sent, double check = delivered/read.
+ * Delivery ticks: one check = sent, double check = delivered/read.
  * Color the read state with the accent (or a brighter shade on colored bubbles).
  */
-export const Ticks = ({ double = false, color, size = 9 }) => {
-    const styles = useMemo(() => createTicksStyles(size), [size]);
-    return (<View style={styles.row}>
-      <Check color={color} size={size}/>
-      {double && <Check color={color} size={size} style={styles.secondCheck}/>}
-    </View>);
+export const Ticks = t0 => {
+  const $ = _c(14);
+  const {
+    double: t1,
+    color,
+    size: t2
+  } = t0;
+  const double = t1 === undefined ? false : t1;
+  const size = t2 === undefined ? 9 : t2;
+  let t3;
+  if ($[0] !== size) {
+    t3 = createTicksStyles(size);
+    $[0] = size;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const styles = t3;
+  let t4;
+  if ($[2] !== color || $[3] !== size) {
+    t4 = <Check color={color} size={size} />;
+    $[2] = color;
+    $[3] = size;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== color || $[6] !== double || $[7] !== size || $[8] !== styles.secondCheck) {
+    t5 = double && <Check color={color} size={size} style={styles.secondCheck} />;
+    $[5] = color;
+    $[6] = double;
+    $[7] = size;
+    $[8] = styles.secondCheck;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== styles.row || $[11] !== t4 || $[12] !== t5) {
+    t6 = <View style={styles.row}>{t4}{t5}</View>;
+    $[10] = styles.row;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  return t6;
 };
+/*
+ * The sending clock: a 1-wide ring of radius
+ * `size / 2 - 0.5` with two round-capped hands from the centre. The minute hand (3 long,
+ * pointing up) turns once every 1.5s, the hour hand (2.3 long, pointing right) once every
+ * 4.5s.
+ */
+export const CLOCK_MINUTE_MS = 1500;
+export const CLOCK_HOUR_MS = CLOCK_MINUTE_MS * 3;
+const STROKE = 1;
+const useTurn = duration => {
+  const $ = _c(4);
+  const rotation = useSharedValue(0);
+  let t0;
+  let t1;
+  if ($[0] !== duration || $[1] !== rotation) {
+    t0 = () => {
+      rotation.value = withRepeat(withTiming(360, {
+        duration,
+        easing: Easing.linear,
+        reduceMotion: ReduceMotion.System
+      }), -1, false);
+      return () => cancelAnimation(rotation);
+    };
+    t1 = [rotation, duration];
+    $[0] = duration;
+    $[1] = rotation;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  useEffect(t0, t1);
+  return useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${rotation.value}deg`
+    }]
+  }));
+};
+
 /**
- * A minimal clock-outline icon for the "pending" (sending) state, replacing the
- * old "🕓" emoji. The hands rotate continuously while the message is sending,
- * mirroring Telegram's spinning clock. Respects the system reduce-motion
- * setting (the hands simply hold still).
+ * The animated sending clock. Respects the system reduce-motion setting (the hands
+ * then hold still).
  */
-export const PendingClock = ({ color, size = 11 }) => {
-    const styles = useMemo(() => createClockStyles(color, size), [color, size]);
-    const rotation = useSharedValue(0);
-    useEffect(() => {
-        rotation.value = withRepeat(withTiming(360, { duration: 1200, easing: Easing.linear, reduceMotion: ReduceMotion.System }), -1, false);
-        return () => cancelAnimation(rotation);
-    }, [rotation]);
-    const handsStyle = useAnimatedStyle(() => ({
-        transform: [{ rotate: `${rotation.value}deg` }],
-    }));
-    return (<View style={styles.face}>
-      <Animated.View style={[styles.hands, StyleSheet.absoluteFill, handsStyle]}>
-        <View style={styles.minuteHand}/>
-        <View style={styles.hourHand}/>
-      </Animated.View>
-    </View>);
+export const PendingClock = t0 => {
+  const $ = _c(24);
+  const {
+    color,
+    size: t1
+  } = t0;
+  const size = t1 === undefined ? 12 : t1;
+  let t2;
+  if ($[0] !== color || $[1] !== size) {
+    t2 = createClockStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const styles = t2;
+  const minuteStyle = useTurn(CLOCK_MINUTE_MS);
+  const hourStyle = useTurn(CLOCK_HOUR_MS);
+  let t3;
+  if ($[3] !== styles.face) {
+    t3 = <View style={styles.face} />;
+    $[3] = styles.face;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== minuteStyle) {
+    t4 = [StyleSheet.absoluteFill, minuteStyle];
+    $[5] = minuteStyle;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== styles.minuteHand) {
+    t5 = <View style={styles.minuteHand} />;
+    $[7] = styles.minuteHand;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t4 || $[10] !== t5) {
+    t6 = <Animated.View style={t4}>{t5}</Animated.View>;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== hourStyle) {
+    t7 = [StyleSheet.absoluteFill, hourStyle];
+    $[12] = hourStyle;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== styles.hourHand) {
+    t8 = <View style={styles.hourHand} />;
+    $[14] = styles.hourHand;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== t7 || $[17] !== t8) {
+    t9 = <Animated.View style={t7}>{t8}</Animated.View>;
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== styles.box || $[20] !== t3 || $[21] !== t6 || $[22] !== t9) {
+    t10 = <View testID="pending-clock" style={styles.box}>{t3}{t6}{t9}</View>;
+    $[19] = styles.box;
+    $[20] = t3;
+    $[21] = t6;
+    $[22] = t9;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  return t10;
 };
 const createCheckStyles = (color, size) => {
-    const thickness = Math.max(1.5, Math.round(size * 0.16));
-    return StyleSheet.create({
-        check: {
-            width: size * 0.55,
-            height: size,
-            borderColor: color,
-            borderRightWidth: thickness,
-            borderBottomWidth: thickness,
-            transform: [{ rotate: '45deg' }],
-        },
-    });
+  const thickness = Math.max(1.5, Math.round(size * 0.16));
+  return StyleSheet.create({
+    check: {
+      width: size * 0.55,
+      height: size,
+      borderColor: color,
+      borderRightWidth: thickness,
+      borderBottomWidth: thickness,
+      transform: [{
+        rotate: '45deg'
+      }]
+    }
+  });
 };
-const createTicksStyles = (size) => StyleSheet.create({
-    row: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: size + 2,
-    },
-    secondCheck: {
-        marginLeft: -size * 0.35,
-    },
+const createTicksStyles = size => StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: size + 2
+  },
+  secondCheck: {
+    marginLeft: -size * 0.35
+  }
 });
 const createClockStyles = (color, size) => {
-    const hand = Math.max(1, Math.round(size * 0.09));
-    return StyleSheet.create({
-        face: {
-            width: size,
-            height: size,
-            borderRadius: size / 2,
-            borderColor: color,
-            borderWidth: hand,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        hands: {
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        minuteHand: {
-            position: 'absolute',
-            width: hand,
-            height: size * 0.32,
-            backgroundColor: color,
-            bottom: '50%',
-        },
-        hourHand: {
-            position: 'absolute',
-            height: hand,
-            width: size * 0.24,
-            backgroundColor: color,
-            left: '50%',
-        },
-    });
+  const centre = size / 2;
+  // The ring is stroked on radius `size / 2 - 0.5`, so it fills the box exactly.
+  const minute = 3;
+  const hour = 2.3;
+  return StyleSheet.create({
+    box: {
+      width: size,
+      height: size
+    },
+    face: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: size,
+      height: size,
+      borderRadius: centre,
+      borderColor: color,
+      borderWidth: STROKE
+    },
+    // Each hand runs from the centre, its round caps reaching half the stroke past both ends.
+    minuteHand: {
+      position: 'absolute',
+      left: centre - STROKE / 2,
+      top: centre - minute - STROKE / 2,
+      width: STROKE,
+      height: minute + STROKE,
+      borderRadius: STROKE / 2,
+      backgroundColor: color
+    },
+    hourHand: {
+      position: 'absolute',
+      left: centre - STROKE / 2,
+      top: centre - STROKE / 2,
+      width: hour + STROKE,
+      height: STROKE,
+      borderRadius: STROKE / 2,
+      backgroundColor: color
+    }
+  });
 };
 //# sourceMappingURL=Ticks.js.map

package/lib/components/Ticks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ticks.js","sourceRoot":"","sources":["../../src/components/Ticks.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Ticks.js","names":["React","useEffect","useMemo","StyleSheet","View","Animated","Easing","ReduceMotion","cancelAnimation","useAnimatedStyle","useSharedValue","withRepeat","withTiming","Check","t0","$","_c","color","size","style","t1","createCheckStyles","styles","t2","check","Ticks","double","undefined","t3","createTicksStyles","t4","t5","secondCheck","t6","row","CLOCK_MINUTE_MS","CLOCK_HOUR_MS","STROKE","useTurn","duration","rotation","value","easing","linear","reduceMotion","System","transform","rotate","PendingClock","createClockStyles","minuteStyle","hourStyle","face","absoluteFill","minuteHand","t7","t8","hourHand","t9","t10","box","thickness","Math","max","round","create","width","height","borderColor","borderRightWidth","borderBottomWidth","flexDirection","alignItems","justifyContent","marginLeft","centre","minute","hour","position","left","top","borderRadius","borderWidth","backgroundColor"],"sources":["../../src/components/Ticks.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react'\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\nimport Animated, {\n  Easing,\n  ReduceMotion,\n  cancelAnimation,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n  withTiming,\n} from 'react-native-reanimated'\n\ninterface CheckProps {\n  color: string\n  size: number\n  style?: StyleProp<ViewStyle>\n}\n\n/**\n * A single checkmark drawn with two borders rotated 45deg - no SVG dependency.\n * Replaces the old literal \"✓\" glyph so the tick is crisp at any size and color.\n */\nconst Check = ({ color, size, style }: CheckProps) => {\n  const styles = useMemo(() => createCheckStyles(color, size), [color, size])\n  return <View style={[styles.check, style]} />\n}\n\nexport interface TicksProps {\n  /** Render a double check (delivered / read) instead of a single check (sent). */\n  double?: boolean\n  color: string\n  /** Visual height of a single check; defaults to 9. */\n  size?: number\n}\n\n/**\n * Delivery ticks: one check = sent, double check = delivered/read.\n * Color the read state with the accent (or a brighter shade on colored bubbles).\n */\nexport const Ticks = ({ double = false, color, size = 9 }: TicksProps) => {\n  const styles = useMemo(() => createTicksStyles(size), [size])\n\n  return (\n    <View style={styles.row}>\n      <Check color={color} size={size} />\n      {double && <Check color={color} size={size} style={styles.secondCheck} />}\n    </View>\n  )\n}\n\nexport interface PendingClockProps {\n  color: string\n  /** Face diameter; 12 by default. */\n  size?: number\n}\n\n/*\n * The sending clock: a 1-wide ring of radius\n * `size / 2 - 0.5` with two round-capped hands from the centre. The minute hand (3 long,\n * pointing up) turns once every 1.5s, the hour hand (2.3 long, pointing right) once every\n * 4.5s.\n */\nexport const CLOCK_MINUTE_MS = 1500\nexport const CLOCK_HOUR_MS = CLOCK_MINUTE_MS * 3\nconst STROKE = 1\n\nconst useTurn = (duration: number) => {\n  const rotation = useSharedValue(0)\n  useEffect(() => {\n    rotation.value = withRepeat(\n      withTiming(360, { duration, easing: Easing.linear, reduceMotion: ReduceMotion.System }),\n      -1,\n      false\n    )\n    return () => cancelAnimation(rotation)\n  }, [rotation, duration])\n  return useAnimatedStyle(() => ({\n    transform: [{ rotate: `${rotation.value}deg` }],\n  }))\n}\n\n/**\n * The animated sending clock. Respects the system reduce-motion setting (the hands\n * then hold still).\n */\nexport const PendingClock = ({ color, size = 12 }: PendingClockProps) => {\n  const styles = useMemo(() => createClockStyles(color, size), [color, size])\n  const minuteStyle = useTurn(CLOCK_MINUTE_MS)\n  const hourStyle = useTurn(CLOCK_HOUR_MS)\n\n  return (\n    <View testID='pending-clock' style={styles.box}>\n      <View style={styles.face} />\n      <Animated.View style={[StyleSheet.absoluteFill, minuteStyle]}>\n        <View style={styles.minuteHand} />\n      </Animated.View>\n      <Animated.View style={[StyleSheet.absoluteFill, hourStyle]}>\n        <View style={styles.hourHand} />\n      </Animated.View>\n    </View>\n  )\n}\n\nconst createCheckStyles = (color: string, size: number) => {\n  const thickness = Math.max(1.5, Math.round(size * 0.16))\n\n  return StyleSheet.create({\n    check: {\n      width: size * 0.55,\n      height: size,\n      borderColor: color,\n      borderRightWidth: thickness,\n      borderBottomWidth: thickness,\n      transform: [{ rotate: '45deg' }],\n    },\n  })\n}\n\nconst createTicksStyles = (size: number) => StyleSheet.create({\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: size + 2,\n  },\n  secondCheck: {\n    marginLeft: -size * 0.35,\n  },\n})\n\nconst createClockStyles = (color: string, size: number) => {\n  const centre = size / 2\n  // The ring is stroked on radius `size / 2 - 0.5`, so it fills the box exactly.\n  const minute = 3\n  const hour = 2.3\n  return StyleSheet.create({\n    box: {\n      width: size,\n      height: size,\n    },\n    face: {\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      width: size,\n      height: size,\n      borderRadius: centre,\n      borderColor: color,\n      borderWidth: STROKE,\n    },\n    // Each hand runs from the centre, its round caps reaching half the stroke past both ends.\n    minuteHand: {\n      position: 'absolute',\n      left: centre - STROKE / 2,\n      top: centre - minute - STROKE / 2,\n      width: STROKE,\n      height: minute + STROKE,\n      borderRadius: STROKE / 2,\n      backgroundColor: color,\n    },\n    hourHand: {\n      position: 'absolute',\n      left: centre - STROKE / 2,\n      top: centre - STROKE / 2,\n      width: hour + STROKE,\n      height: STROKE,\n      borderRadius: STROKE / 2,\n      backgroundColor: color,\n    },\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TouchableOpacity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchableOpacity.d.ts","sourceRoot":"","sources":["../../src/components/TouchableOpacity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,QAIN,MAAM,yBAAyB,CAAA;AAEhC,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,SAAS,CAAC,GAAG;IAC7F,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;AAE9C,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoE5D,CAAA"}
+{"version":3,"file":"TouchableOpacity.d.ts","sourceRoot":"","sources":["../../src/components/TouchableOpacity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,QAIN,MAAM,yBAAyB,CAAA;AAEhC,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,SAAS,CAAC,GAAG;IAC7F,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;AAQ9C,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoE5D,CAAA"}

package/lib/components/TouchableOpacity.js

@@ -1,58 +1,160 @@
+import { c as _c } from "react/compiler-runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { BaseButton } from 'react-native-gesture-handler';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-export const TouchableOpacity = ({ children, style, activeOpacity = 0.2, onPress, ...rest }) => {
-    const opacity = useSharedValue(1);
-    const isAnimationInFinished = useSharedValue(false);
-    // The press-out fade is deferred so a quick tap still shows the pressed state for a
-    // full beat. That timer has to be cancellable: unmounting between press-out and the
-    // fade (a button that dismisses its own sheet) would otherwise leave it pending.
-    const pressOutTimeout = useRef(undefined);
-    useEffect(() => () => {
-        clearTimeout(pressOutTimeout.current);
-    }, []);
-    const handlePressIn = useCallback(() => {
-        opacity.value = withTiming(activeOpacity, { duration: 150 }, () => {
-            isAnimationInFinished.value = true;
-        });
-    }, [activeOpacity, opacity, isAnimationInFinished]);
-    const handlePressOut = useCallback(() => {
-        clearTimeout(pressOutTimeout.current);
-        pressOutTimeout.current = setTimeout(() => {
-            opacity.value = withTiming(1, { duration: 150 });
-            isAnimationInFinished.value = false;
-        }, isAnimationInFinished.value ? 0 : 150);
-    }, [opacity, isAnimationInFinished]);
-    const handleActiveStateChange = useCallback((isActive) => {
-        if (isActive)
-            handlePressIn();
-        else
-            handlePressOut();
-    }, [handlePressIn, handlePressOut]);
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-    }));
-    const handlePress = useCallback(() => {
-        onPress?.();
-    }, [onPress]);
-    // Every tappable in the library goes through this component - each message bubble, avatar,
-    // action and attachment - so composing the style list inline handed Animated.View a fresh array
-    // on each of those renders.
-    const composedStyle = useMemo(() => [style, animatedStyle, styles.content], [style, animatedStyle]);
-    return (<BaseButton {...rest} onPress={handlePress} onActiveStateChange={handleActiveStateChange}>
-      <Animated.View 
-    // The content view must not capture touches, otherwise it swallows the
-    // BaseButton's press on Android (see #2714). pointerEvents in style is
-    // the non-deprecated form on RN's New Architecture.
-    style={composedStyle}>
-        {children}
-      </Animated.View>
-    </BaseButton>);
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+// Built on gesture-handler's `BaseButton`, not the `Touchable` 3.0 recommends in
+// its place. `Touchable` handles the press natively, outside the gesture system,
+// so a bubble's long-press could no longer win over a photo or play button
+// inside it: holding a photo neither opened the menu nor stopped the release
+// from opening the viewer. `BaseButton` is still a gesture, so it loses to the
+// long-press the way it always did.
+export const TouchableOpacity = t0 => {
+  const $ = _c(31);
+  let children;
+  let onPress;
+  let rest;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      style,
+      activeOpacity: t1,
+      onPress,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = onPress;
+    $[3] = rest;
+    $[4] = style;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    onPress = $[2];
+    rest = $[3];
+    style = $[4];
+    t1 = $[5];
+  }
+  const activeOpacity = t1 === undefined ? 0.2 : t1;
+  const opacity = useSharedValue(1);
+  const isAnimationInFinished = useSharedValue(false);
+  const pressOutTimeout = useRef(undefined);
+  let t2;
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => () => {
+      clearTimeout(pressOutTimeout.current);
+    };
+    t3 = [];
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t2 = $[6];
+    t3 = $[7];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[8] !== activeOpacity || $[9] !== isAnimationInFinished || $[10] !== opacity) {
+    t4 = () => {
+      opacity.set(withTiming(activeOpacity, {
+        duration: 150
+      }, () => {
+        isAnimationInFinished.set(true);
+      }));
+    };
+    $[8] = activeOpacity;
+    $[9] = isAnimationInFinished;
+    $[10] = opacity;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const handlePressIn = t4;
+  let t5;
+  if ($[12] !== isAnimationInFinished || $[13] !== opacity) {
+    t5 = () => {
+      clearTimeout(pressOutTimeout.current);
+      pressOutTimeout.current = setTimeout(() => {
+        opacity.set(withTiming(1, {
+          duration: 150
+        }));
+        isAnimationInFinished.set(false);
+      }, isAnimationInFinished.get() ? 0 : 150);
+    };
+    $[12] = isAnimationInFinished;
+    $[13] = opacity;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  const handlePressOut = t5;
+  let t6;
+  if ($[15] !== handlePressIn || $[16] !== handlePressOut) {
+    t6 = isActive => {
+      if (isActive) {
+        handlePressIn();
+      } else {
+        handlePressOut();
+      }
+    };
+    $[15] = handlePressIn;
+    $[16] = handlePressOut;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const handleActiveStateChange = t6;
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.get()
+  }));
+  let t7;
+  if ($[18] !== onPress) {
+    t7 = () => {
+      onPress?.();
+    };
+    $[18] = onPress;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const handlePress = t7;
+  let t8;
+  if ($[20] !== animatedStyle || $[21] !== style) {
+    t8 = [style, animatedStyle, styles.content];
+    $[20] = animatedStyle;
+    $[21] = style;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  const composedStyle = t8;
+  let t9;
+  if ($[23] !== children || $[24] !== composedStyle) {
+    t9 = <Animated.View style={composedStyle}>{children}</Animated.View>;
+    $[23] = children;
+    $[24] = composedStyle;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  let t10;
+  if ($[26] !== handleActiveStateChange || $[27] !== handlePress || $[28] !== rest || $[29] !== t9) {
+    t10 = <BaseButton {...rest} onPress={handlePress} onActiveStateChange={handleActiveStateChange}>{t9}</BaseButton>;
+    $[26] = handleActiveStateChange;
+    $[27] = handlePress;
+    $[28] = rest;
+    $[29] = t9;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  return t10;
 };
 const styles = StyleSheet.create({
-    content: {
-        pointerEvents: 'none',
-    },
+  content: {
+    pointerEvents: 'none'
+  }
 });
 //# sourceMappingURL=TouchableOpacity.js.map