react-native-inapp-inspector 2.3.15 → 2.3.17

package/dist/esm/components/NetworkIcons.d.ts

@@ -91,6 +91,7 @@ export declare const CartIcon: ({ color, size }: IconProps) => React.JSX.Element
 export declare const MoneyIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ExternalLinkIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PackageBoxIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const StarIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const GitHubIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const LinkChainIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const AppleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -138,3 +139,15 @@ export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const UnlockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const RocketIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const TurtleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const HeadphonesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const HelpCircleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const SendIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LifeBuoyIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const CameraIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const VideoCameraIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const MicrophoneIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const GifIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PlayIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PauseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ImageIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const FilmIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -510,6 +510,11 @@ export const PackageBoxIcon = ({ color = AppColors.grayTextWeak, size = 14, }) =
       <Path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const StarIcon = ({ color = '#F59E0B', size = 14, }) => {
+    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, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
@@ -760,3 +765,66 @@ export const TurtleIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
     <Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2"/>
     <Path d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
   </Svg>);
+export const HeadphonesIcon = ({ color = AppColors.white, size = 20, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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/dist/esm/components/SectionHeader.js

@@ -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';
 import { AppColors } from '../styles/AppColors';
 import CopyButton from './CopyButton';
 import TouchableScale from './TouchableScale';
@@ -7,18 +7,6 @@ import { RequestIcon, ResponseIcon, HeadersIcon, DiffIcon, ChevronIcon, SearchIc
 import styles from '../styles';
 const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }) => {
     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}>
       <View style={styles.sectionHeaderRow}>
         <Pressable style={styles.sectionTitleRow} onPress={onToggleExpand} hitSlop={12}>
@@ -40,9 +28,9 @@ const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDif
             </TouchableScale>)}
           <CopyButton value={value} label={title}/>
           <TouchableScale 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/dist/esm/components/SkeletonPlaceholder.js

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

package/dist/esm/components/SourcePageCard.js

@@ -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';
 import CopyButton from './CopyButton';
 import useAccordion from '../customHooks/useAccordion';
@@ -7,8 +7,8 @@ import { ChevronIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const SourcePageCard = ({ routeInfo }) => {
-    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;
     return (<View style={styles.sourcePageCard}>
       <Pressable onPress={main.toggleOpen} hitSlop={12}>
@@ -32,59 +32,57 @@ const SourcePageCard = ({ routeInfo }) => {
           <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'
-                    ? JSON.stringify(val)
-                    : String(val)} label={key}/>
-                    </View>
-                  </View>))}
-              </View>
-            </Animated.View>
-          </View>)}
-      </Animated.View>
+              {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)}
+                        </Text>
+                        <CopyButton value={typeof val === 'object'
+                            ? JSON.stringify(val)
+                            : String(val)} label={key}/>
+                      </View>
+                    </View>))}
+                </View>)}
+            </View>)}
+        </View>)}
     </View>);
 };
 export default SourcePageCard;

package/dist/esm/components/Toast.js

@@ -19,13 +19,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();
             hideTimerRef.current = setTimeout(() => {
@@ -33,12 +33,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/dist/esm/components/TouchableScale.js

@@ -1,45 +1,19 @@
-import React, { useRef } from 'react';
-import { Animated, Pressable } from 'react-native';
+import React from 'react';
+import { Pressable } from 'react-native';
 import { triggerNativeHaptic } from '../native/NativeInspector';
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const TouchableScale = React.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, enableHaptics = true, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, accessibilityState, accessibilityValue, ...rest }) {
-    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 accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} style={[style, { opacity, transform: [{ scale }] }]} onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} {...rest}>
+    return (<Pressable accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} style={({ pressed }) => [
+            typeof style === 'function' ? style({ pressed }) : style,
+            pressed && !disabled && { opacity: 0.82, transform: [{ scale: 0.96 }] },
+        ]} onPressIn={handlePressIn} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} {...rest}>
       {children}
-    </AnimatedPressable>);
+    </Pressable>);
 });
 export default TouchableScale;

package/dist/esm/components/TreeNode.js

@@ -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';
 import { escapeRegex } from '../helpers';
 import { ChevronIcon, DocIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
@@ -19,18 +19,6 @@ const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, f
     }, [forceOpen]);
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);
-    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) {
         if (text === 'null' || text === 'undefined') {
             return [
@@ -89,9 +77,9 @@ const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, f
     const countLabel = isArray ? `[${entries.length}]` : `{${entries.length}}`;
     return (<View style={indentStyle}>
       <Pressable 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)}"`}</Text>)}
         {isArray ? (<View style={styles.arrayBadge}>
             <Text style={styles.arrayBadgeText}>{countLabel}</Text>

package/dist/esm/constants/telemetryConfig.d.ts

@@ -1,3 +1,3 @@
-export declare const ENC_MID = "df8ace0290a695bd05986213";
-export declare const ENC_SEC = "db93cb0186b1f7bb0ba63a0d0a64997586849455ce37";
-export declare const TELEMETRY_SALT = "rn-inapp-inspector-telemetry-v1";
+export declare const ENC_MID = "";
+export declare const ENC_SEC = "";
+export declare const TELEMETRY_SALT = "";

package/dist/esm/constants/telemetryConfig.js

@@ -1,3 +1,3 @@
-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/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.15";
+export declare const LIB_VERSION = "2.3.17";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.15';
+export const LIB_VERSION = '2.3.17';

package/dist/esm/customHooks/useAccordion.d.ts

@@ -1,17 +1,12 @@
-import { Animated } from 'react-native';
-declare const useAccordion: (initialOpen?: boolean, maxBodyHeight?: number, duration?: number) => {
+declare const useAccordion: (initialOpen?: boolean, _maxBodyHeight?: number, _duration?: number) => {
     isOpen: boolean;
     toggleOpen: () => void;
     forceOpen: (open: boolean) => void;
     chevronStyle: {
         transform: {
-            rotate: Animated.AnimatedInterpolation<string | number>;
+            rotate: string;
         }[];
     };
-    bodyStyle: {
-        maxHeight: Animated.AnimatedInterpolation<string | number>;
-        overflow: "hidden";
-        opacity: Animated.AnimatedInterpolation<string | number>;
-    };
+    bodyStyle: {};
 };
 export default useAccordion;

package/dist/esm/customHooks/useAccordion.js

@@ -1,46 +1,16 @@
-import { useCallback, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-const useAccordion = (initialOpen = false, maxBodyHeight = 1200, duration = 280) => {
+import { useCallback, useState } from 'react';
+const useAccordion = (initialOpen = false, _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) => {
         setIsOpen(open);
-        Animated.timing(animVal, {
-            toValue: open ? 1 : 0,
-            duration,
-            useNativeDriver: false,
-        }).start();
-    }, [animVal, duration]);
+    }, []);
     const chevronStyle = {
-        transform: [
-            {
-                rotate: animVal.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: ['0deg', '180deg'],
-                }),
-            },
-        ],
-    };
-    const bodyStyle = {
-        maxHeight: animVal.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, maxBodyHeight],
-        }),
-        overflow: 'hidden',
-        opacity: animVal.interpolate({
-            inputRange: [0, 0.4, 1],
-            outputRange: [0, 0.7, 1],
-        }),
+        transform: [{ rotate: isOpen ? '180deg' : '0deg' }],
     };
+    const bodyStyle = {};
     return { isOpen, toggleOpen, forceOpen, chevronStyle, bodyStyle };
 };
 export default useAccordion;

package/dist/esm/helpers/index.d.ts

@@ -1,6 +1,7 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export * from './toast';
 export declare const isLocalDebugEnvironment: () => boolean;
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;
@@ -8,7 +9,8 @@ export declare const formatTimestamp: (timestamp: number) => string;
 export declare const getStatusColor: (status: number | null) => string;
 export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
-export declare const copyToClipboard: (value: unknown, label: string) => void;
+export declare const formatBytes: (bytes: number) => string;
+export declare const copyToClipboard: (value: unknown, label?: string) => void;
 export declare const getPath: (url: string) => string;
 export declare const getBaseUrl: (url: string) => string;
 export declare const getCurlCommand: (log: NetworkLog) => string;

package/dist/esm/helpers/index.js

@@ -5,6 +5,7 @@ import { AppColors } from '../styles/AppColors';
 import { DOMAIN_COLORS, DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export * from './toast';
 export const isLocalDebugEnvironment = () => {
     const isDev = typeof __DEV__ !== 'undefined' && Boolean(__DEV__);
     const scriptURL = NativeModules.SourceCode?.scriptURL || '';
@@ -76,6 +77,14 @@ export const getSize = (data) => {
         return '—';
     }
 };
+export const formatBytes = (bytes) => {
+    if (bytes === 0 || !bytes || isNaN(bytes))
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i] || 'B'}`;
+};
 export const copyToClipboard = (value, label) => {
     const resolved = typeof value === 'function' ? value() : value;
     let textToCopy = '';

package/dist/esm/helpers/remoteConfig.d.ts

@@ -0,0 +1,4 @@
+import { ActiveTab } from '../types';
+export declare function getFirebaseRemoteConfig(customInstance?: any): any;
+export declare function isFirebaseRemoteConfigAvailable(customInstance?: any): boolean;
+export declare function fetchRemoteConfigModuleStatus(customInstance?: any, fetchTimeoutMs?: number): Promise<Partial<Record<ActiveTab, boolean>> | null>;