react-native-inapp-inspector 2.3.15 → 2.3.17

package/src/components/NetworkIcons.tsx

@@ -1520,6 +1520,23 @@ export const PackageBoxIcon = ({
   );
 };
 
+export const StarIcon = ({
+  color = '#F59E0B',
+  size = 14,
+}: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path
+        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
 export const GitHubIcon = ({
   color = AppColors.grayTextWeak,
   size = 14,
@@ -2355,3 +2372,228 @@ export const TurtleIcon = ({
   </Svg>
 );
 
+export const HeadphonesIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M3 18v-6a9 9 0 0 1 18 0v6"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const HelpCircleIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2" />
+    <Path
+      d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Line x1="12" y1="17" x2="12.01" y2="17" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </Svg>
+);
+
+export const SendIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M22 2L11 13"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M22 2L15 22L11 13L2 9L22 2Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const LifeBuoyIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2" />
+    <Circle cx="12" cy="12" r="4" stroke={color} strokeWidth="2" />
+    <Line x1="4.93" y1="4.93" x2="9.17" y2="9.17" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="14.83" y1="9.17" x2="19.07" y2="4.93" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="14.83" y1="14.83" x2="19.07" y2="19.07" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="4.93" y1="19.07" x2="9.17" y2="14.83" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </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.15';
+export const LIB_VERSION = '2.3.17';