react-native-inapp-inspector 2.3.16 → 2.3.18

package/src/components/LogCard.tsx

@@ -108,7 +108,7 @@ const LogCard = React.memo(function LogCard({
       Animated.timing(shimmerOpacity, {
         toValue: 0,
         duration: 1200,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start();
     }
   }, [isNew]);
@@ -423,13 +423,15 @@ const LogCard = React.memo(function LogCard({
           )}
         </View>
 
-        <Animated.View
-          pointerEvents="none"
-          style={[
-            StyleSheet.absoluteFill,
-            {backgroundColor: methodColor, opacity: shimmerOpacity},
-          ]}
-        />
+        {isNew && (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              StyleSheet.absoluteFill,
+              {backgroundColor: methodColor, opacity: shimmerOpacity},
+            ]}
+          />
+        )}
       </TouchableScale>
     </View>
   );

package/src/components/MetaAccordion.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {useTranslation} from '../i18n';
-import {View, Pressable, Text, Animated} from 'react-native';
+import {View, Pressable, Text} from 'react-native';
 
 // Constants
 import {DURATION_FAST_MS, DURATION_SLOW_MS} from '../constants';
@@ -46,7 +46,7 @@ const MetaAccordion = ({
 }: MetaAccordionProps) => {
   const {t} = useTranslation();
   const [urlExpanded, setUrlExpanded] = useState(false);
-  const {toggleOpen, chevronStyle, bodyStyle} = useAccordion(true, 800, 390);
+  const {isOpen, toggleOpen, chevronStyle} = useAccordion(true);
   const isFailed = status === 0 || status == null;
 
   const renderFormattedUrl = (rawUrl: string) => {
@@ -111,14 +111,14 @@ const MetaAccordion = ({
               }}
               label="Metadata"
             />
-            <Animated.View style={chevronStyle}>
+            <View style={chevronStyle}>
               <ChevronIcon color={AppColors.grayTextWeak} size={14} />
-            </Animated.View>
+            </View>
           </View>
         </View>
       </Pressable>
 
-      <Animated.View style={bodyStyle}>
+      {isOpen && (
         <View style={styles.metaBody}>
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
@@ -347,7 +347,7 @@ const MetaAccordion = ({
             </View>
           </View>
         </View>
-      </Animated.View>
+      )}
     </View>
   );
 };

package/src/components/NetworkIcons.tsx

@@ -2447,3 +2447,153 @@ export const LifeBuoyIcon = ({
   </Svg>
 );
 
+export const CameraIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Circle cx="12" cy="13" r="4" stroke={color} strokeWidth="2" />
+  </Svg>
+);
+
+export const VideoCameraIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M23 7l-7 5 7 5V7z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Rect
+      x="1"
+      y="5"
+      width="15"
+      height="14"
+      rx="2"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const MicrophoneIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M19 10v2a7 7 0 0 1-14 0v-2"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Line x1="12" y1="19" x2="12" y2="23" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="8" y1="23" x2="16" y2="23" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </Svg>
+);
+
+export const GifIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="2" y="4" width="20" height="16" rx="3" stroke={color} strokeWidth="2" />
+    <Path
+      d="M7 10h-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h1v-2H6.5"
+      stroke={color}
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M12 10v4" stroke={color} strokeWidth="1.75" strokeLinecap="round" />
+    <Path
+      d="M18 10h-2v4M16 12h1.5"
+      stroke={color}
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const PlayIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 3l14 9-14 9V3z"
+      fill={color}
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const PauseIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="6" y="4" width="4" height="16" fill={color} rx="1" />
+    <Rect x="14" y="4" width="4" height="16" fill={color} rx="1" />
+  </Svg>
+);
+
+export const ImageIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2" />
+    <Circle cx="8.5" cy="8.5" r="1.5" fill={color} />
+    <Path
+      d="M21 15l-5-5L5 21"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const FilmIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="2" y="2" width="20" height="20" rx="2.18" stroke={color} strokeWidth="2" />
+    <Line x1="7" y1="2" x2="7" y2="22" stroke={color} strokeWidth="2" />
+    <Line x1="17" y1="2" x2="17" y2="22" stroke={color} strokeWidth="2" />
+    <Line x1="2" y1="12" x2="22" y2="12" stroke={color} strokeWidth="2" />
+    <Line x1="2" y1="7" x2="7" y2="7" stroke={color} strokeWidth="2" />
+    <Line x1="2" y1="17" x2="7" y2="17" stroke={color} strokeWidth="2" />
+    <Line x1="17" y1="17" x2="22" y2="17" stroke={color} strokeWidth="2" />
+    <Line x1="17" y1="7" x2="22" y2="7" stroke={color} strokeWidth="2" />
+  </Svg>
+);
+
+

package/src/components/SectionHeader.tsx

@@ -1,5 +1,5 @@
-import React, {useRef, useEffect} from 'react';
-import {Animated, View, Pressable, Text} from 'react-native';
+import React from 'react';
+import {View, Pressable, Text} from 'react-native';
 
 // Stylesheet
 import {AppColors} from '../styles/AppColors';
@@ -37,18 +37,6 @@ const SectionHeader = ({
   onToggleSearch,
 }: SectionHeaderProps) => {
   const isOpen = expanded === undefined ? false : !!expanded;
-  const chevronAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.timing(chevronAnim, {
-      toValue: isOpen ? 1 : 0,
-      duration: 220,
-      useNativeDriver: true,
-    }).start();
-  }, [isOpen]);
-  const chevronRotate = chevronAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  });
 
   return (
     <View style={styles.sectionHeaderGradient}>
@@ -100,9 +88,9 @@ const SectionHeader = ({
             onPress={onToggleExpand}
             hitSlop={12}
             style={styles.iconSquareBtn}>
-            <Animated.View style={{transform: [{rotate: chevronRotate}]}}>
+            <View style={{transform: [{rotate: isOpen ? '180deg' : '0deg'}]}}>
               <ChevronIcon color={AppColors.grayTextStrong} size={14} />
-            </Animated.View>
+            </View>
           </TouchableScale>
         </View>
       </View>

package/src/components/SkeletonPlaceholder.tsx

@@ -17,12 +17,12 @@ export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({
         Animated.timing(shimmerAnim, {
           toValue: 0.85,
           duration: 750,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.timing(shimmerAnim, {
           toValue: 0.35,
           duration: 750,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
       ]),
     );

package/src/components/SourcePageCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, Pressable, Text, Animated} from 'react-native';
+import {View, Pressable, Text} from 'react-native';
 import Svg, {Rect, Path} from 'react-native-svg';
 
 // Components
@@ -19,8 +19,8 @@ import {AppColors} from '../styles/AppColors';
 import styles from '../styles';
 
 const SourcePageCard = ({routeInfo}: SourcePageCardProps) => {
-  const main = useAccordion(true, 600, 280);
-  const params = useAccordion(false, 800, 260);
+  const main = useAccordion(true);
+  const params = useAccordion(false);
 
   const hasParams =
     routeInfo.params && Object.keys(routeInfo.params).length > 0;
@@ -77,70 +77,72 @@ const SourcePageCard = ({routeInfo}: SourcePageCardProps) => {
           <View style={styles.sourcePageHeaderRight}>
             <CopyButton value={routeInfo.path} label="Source Path" />
             <View style={styles.iconSquareBtn}>
-              <Animated.View style={main.chevronStyle}>
+              <View style={main.chevronStyle}>
                 <ChevronIcon color={AppColors.grayTextStrong} size={14} />
-              </Animated.View>
+              </View>
             </View>
           </View>
         </View>
       </Pressable>
 
-      <Animated.View style={main.bodyStyle}>
-        {hasParams && (
-          <View style={styles.sourceParamsBox}>
-            <Pressable onPress={params.toggleOpen} hitSlop={10}>
-              <View style={styles.paramsAccordionHeader}>
-                <View style={styles.paramsAccordionLeft}>
-                  <Text style={styles.sourceParamsLabel}>Parameters</Text>
-                  <View style={styles.headerCountBadge}>
-                    <Text style={styles.headerCountText}>
-                      {Object.keys(routeInfo.params).length}
-                    </Text>
+      {main.isOpen && (
+        <View>
+          {hasParams && (
+            <View style={styles.sourceParamsBox}>
+              <Pressable onPress={params.toggleOpen} hitSlop={10}>
+                <View style={styles.paramsAccordionHeader}>
+                  <View style={styles.paramsAccordionLeft}>
+                    <Text style={styles.sourceParamsLabel}>Parameters</Text>
+                    <View style={styles.headerCountBadge}>
+                      <Text style={styles.headerCountText}>
+                        {Object.keys(routeInfo.params).length}
+                      </Text>
+                    </View>
                   </View>
-                </View>
-                <View style={styles.paramsAccordionRight}>
-                  <CopyButton value={routeInfo.params} label="Parameters" />
-                  <View style={styles.iconSquareBtn}>
-                    <Animated.View style={params.chevronStyle}>
-                      <ChevronIcon color={AppColors.grayTextStrong} size={14} />
-                    </Animated.View>
+                  <View style={styles.paramsAccordionRight}>
+                    <CopyButton value={routeInfo.params} label="Parameters" />
+                    <View style={styles.iconSquareBtn}>
+                      <View style={params.chevronStyle}>
+                        <ChevronIcon color={AppColors.grayTextStrong} size={14} />
+                      </View>
+                    </View>
                   </View>
                 </View>
-              </View>
-            </Pressable>
+              </Pressable>
 
-            <Animated.View style={params.bodyStyle}>
-              <View style={styles.paramsBody}>
-                {Object.entries(routeInfo.params).map(([key, val], i, arr) => (
-                  <View
-                    key={key}
-                    style={[
-                      styles.paramRow,
-                      i < arr.length - 1 ? styles.paramRowBorder : null,
-                    ]}>
-                    <Text style={styles.paramKey}>{key}</Text>
-                    <View style={styles.paramValueRow}>
-                      <Text selectable style={styles.paramValue}>
-                        {typeof val === 'object'
-                          ? JSON.stringify(val)
-                          : String(val)}
-                      </Text>
-                      <CopyButton
-                        value={
-                          typeof val === 'object'
+              {params.isOpen && (
+                <View style={styles.paramsBody}>
+                  {Object.entries(routeInfo.params).map(([key, val], i, arr) => (
+                    <View
+                      key={key}
+                      style={[
+                        styles.paramRow,
+                        i < arr.length - 1 ? styles.paramRowBorder : null,
+                      ]}>
+                      <Text style={styles.paramKey}>{key}</Text>
+                      <View style={styles.paramValueRow}>
+                        <Text selectable style={styles.paramValue}>
+                          {typeof val === 'object'
                             ? JSON.stringify(val)
-                            : String(val)
-                        }
-                        label={key}
-                      />
+                            : String(val)}
+                        </Text>
+                        <CopyButton
+                          value={
+                            typeof val === 'object'
+                              ? JSON.stringify(val)
+                              : String(val)
+                          }
+                          label={key}
+                        />
+                      </View>
                     </View>
-                  </View>
-                ))}
-              </View>
-            </Animated.View>
-          </View>
-        )}
-      </Animated.View>
+                  ))}
+                </View>
+              )}
+            </View>
+          )}
+        </View>
+      )}
     </View>
   );
 };

package/src/components/Toast.tsx

@@ -23,13 +23,13 @@ const Toast = React.memo(() => {
         Animated.timing(opacityAnim, {
           toValue: 1,
           duration: 180,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.spring(translateYAnim, {
           toValue: 0,
           tension: 80,
           friction: 8,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
       ]).start();
 
@@ -38,12 +38,12 @@ const Toast = React.memo(() => {
           Animated.timing(opacityAnim, {
             toValue: 0,
             duration: 200,
-            useNativeDriver: true,
+            useNativeDriver: false,
           }),
           Animated.timing(translateYAnim, {
             toValue: 20,
             duration: 200,
-            useNativeDriver: true,
+            useNativeDriver: false,
           }),
         ]).start(() => {
           setToastMessage(null);

package/src/components/TouchableScale.tsx

@@ -1,9 +1,7 @@
-import React, {useRef} from 'react';
-import {Animated, Pressable, PressableProps} from 'react-native';
+import React from 'react';
+import {Pressable, PressableProps} from 'react-native';
 import {triggerNativeHaptic} from '../native/NativeInspector';
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-
 export interface TouchableScaleProps extends PressableProps {
   onPress?: () => void;
   onLongPress?: () => void;
@@ -30,45 +28,15 @@ const TouchableScale = React.memo(function TouchableScale({
   accessibilityValue,
   ...rest
 }: TouchableScaleProps) {
-  const scale = useRef(new Animated.Value(1)).current;
-  const opacity = useRef(new Animated.Value(1)).current;
-
   const handlePressIn = () => {
     if (disabled) return;
     if (enableHaptics) {
       triggerNativeHaptic('light');
     }
-    Animated.parallel([
-      Animated.timing(scale, {
-        toValue: 0.94,
-        duration: 50,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue: 0.85,
-        duration: 50,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  };
-
-  const handlePressOut = () => {
-    Animated.parallel([
-      Animated.timing(scale, {
-        toValue: 1,
-        duration: 100,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 100,
-        useNativeDriver: true,
-      }),
-    ]).start();
   };
 
   return (
-    <AnimatedPressable
+    <Pressable
       accessible={accessible}
       accessibilityRole={accessibilityRole}
       accessibilityLabel={accessibilityLabel}
@@ -76,15 +44,17 @@ const TouchableScale = React.memo(function TouchableScale({
       accessibilityState={accessibilityState}
       accessibilityValue={accessibilityValue}
       disabled={disabled}
-      style={[style, {opacity, transform: [{scale}]}]}
+      style={({pressed}) => [
+        typeof style === 'function' ? style({pressed}) : style,
+        pressed && !disabled && {opacity: 0.82, transform: [{scale: 0.96}]},
+      ]}
       onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
       onPress={onPress}
       onLongPress={onLongPress}
       hitSlop={hitSlop}
       {...rest}>
       {children}
-    </AnimatedPressable>
+    </Pressable>
   );
 });
 

package/src/components/TreeNode.tsx

@@ -1,5 +1,5 @@
-import React, {useState, useRef, useEffect} from 'react';
-import {Text, View, Image, Animated, Pressable} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {Text, View, Image, Pressable} from 'react-native';
 
 // Helpers
 import {escapeRegex} from '../helpers';
@@ -39,21 +39,6 @@ const TreeNode = React.memo(function TreeNode({
   const isObject = typeof data === 'object' && data !== null;
   const isArray = Array.isArray(data);
 
-  // Declare all hooks at the top unconditionally (prevents "Rendered fewer hooks than expected" error)
-  const treeChevronAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.timing(treeChevronAnim, {
-      toValue: open ? 1 : 0,
-      duration: 160,
-      useNativeDriver: true,
-    }).start();
-  }, [open]);
-
-  const treeChevronRotate = treeChevronAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  });
-
   function renderHighlighted(text: string): React.ReactNode[] {
     if (text === 'null' || text === 'undefined') {
       return [
@@ -145,10 +130,10 @@ const TreeNode = React.memo(function TreeNode({
         style={styles.treeRow}
         onPress={() => setLocalOpen(v => !v)}
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}>
-        <Animated.View
-          style={{transform: [{rotate: treeChevronRotate}], marginRight: 6}}>
+        <View
+          style={{transform: [{rotate: open ? '180deg' : '0deg'}], marginRight: 6}}>
           <ChevronIcon color={AppColors.grayTextWeak} size={12} />
-        </Animated.View>
+        </View>
         {name !== undefined && (
           <Text style={[styles.codeKey, styles.treeKeyMargin]}>{`"${String(
             name,

package/src/constants/telemetryConfig.ts

@@ -1,6 +1,4 @@
 // AUTO-GENERATED FILE — do not edit by hand.
-// Generated by scripts/gen-telemetry.js from .env at build time.
-
-export const ENC_MID = 'df8ace0290a695bd05986213';
-export const ENC_SEC = 'db93cb0186b1f7bb0ba63a0d0a64997586849455ce37';
-export const TELEMETRY_SALT = 'rn-inapp-inspector-telemetry-v1';
+export const ENC_MID = '';
+export const ENC_SEC = '';
+export const TELEMETRY_SALT = '';

package/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.16';
+export const LIB_VERSION = '2.3.18';

package/src/customHooks/useAccordion.tsx

@@ -1,58 +1,25 @@
-import {useCallback, useRef, useState} from 'react';
-import {Animated} from 'react-native';
+import {useCallback, useState} from 'react';
 
 const useAccordion = (
   initialOpen = false,
-  maxBodyHeight = 1200,
-  duration = 280,
+  _maxBodyHeight = 1200,
+  _duration = 280,
 ) => {
   const [isOpen, setIsOpen] = useState(initialOpen);
-  const animVal = useRef(new Animated.Value(initialOpen ? 1 : 0)).current;
 
   const toggleOpen = useCallback(() => {
-    const next = !isOpen;
-    setIsOpen(next);
-    Animated.timing(animVal, {
-      toValue: next ? 1 : 0,
-      duration,
-      useNativeDriver: false,
-    }).start();
-  }, [isOpen, animVal, duration]);
+    setIsOpen(prev => !prev);
+  }, []);
 
-  const forceOpen = useCallback(
-    (open: boolean) => {
-      setIsOpen(open);
-      Animated.timing(animVal, {
-        toValue: open ? 1 : 0,
-        duration,
-        useNativeDriver: false,
-      }).start();
-    },
-    [animVal, duration],
-  );
+  const forceOpen = useCallback((open: boolean) => {
+    setIsOpen(open);
+  }, []);
 
   const chevronStyle = {
-    transform: [
-      {
-        rotate: animVal.interpolate({
-          inputRange: [0, 1],
-          outputRange: ['0deg', '180deg'],
-        }),
-      },
-    ],
+    transform: [{rotate: isOpen ? '180deg' : '0deg'}],
   };
 
-  const bodyStyle = {
-    maxHeight: animVal.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, maxBodyHeight],
-    }),
-    overflow: 'hidden' as const,
-    opacity: animVal.interpolate({
-      inputRange: [0, 0.4, 1],
-      outputRange: [0, 0.7, 1],
-    }),
-  };
+  const bodyStyle = {};
 
   return {isOpen, toggleOpen, forceOpen, chevronStyle, bodyStyle};
 };