react-native-inapp-inspector 2.3.16 → 2.3.18

package/dist/esm/components/MetaAccordion.js

@@ -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';
 import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 import useAccordion from '../customHooks/useAccordion';
 import { getDurationColor, handleOpenExternalLink } from '../helpers';
@@ -13,7 +13,7 @@ import styles from '../styles';
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
     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) => {
         if (!rawUrl)
@@ -65,24 +65,23 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             contentType: contentType || 'application/json',
             url: url || '',
         }} 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}>
-        <View style={styles.metaBody}>
+      {isOpen && (<View style={styles.metaBody}>
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <CalendarIcon color={AppColors.grayTextWeak} size={14}/>
               <Text style={styles.metaLabel}>{t('network.triggeredAt')}</Text>
             </View>
             <Text style={[
-            styles.metaValue,
-            { color: AppColors.purple, fontSize: 12 },
-        ]}>
+                styles.metaValue,
+                { color: AppColors.purple, fontSize: 12 },
+            ]}>
               {triggeredAt}
             </Text>
           </View>
@@ -94,16 +93,16 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <Text style={styles.metaLabel}>{t('network.methodHeader')}</Text>
             </View>
             <View style={[
-            styles.statusChip,
-            {
-                borderColor: `${AppColors.brandPurple}40`,
-                backgroundColor: `${AppColors.brandPurple}14`,
-            },
-        ]}>
+                styles.statusChip,
+                {
+                    borderColor: `${AppColors.brandPurple}40`,
+                    backgroundColor: `${AppColors.brandPurple}14`,
+                },
+            ]}>
               <Text style={[
-            styles.statusText,
-            { color: AppColors.purple, fontFamily: AppFonts.interBold },
-        ]}>
+                styles.statusText,
+                { color: AppColors.purple, fontFamily: AppFonts.interBold },
+            ]}>
                 {method || 'GET'}
               </Text>
             </View>
@@ -116,20 +115,20 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <Text style={styles.metaLabel}>{t('network.statusHeader')}</Text>
             </View>
             <View style={[
-            styles.statusChip,
-            {
-                borderColor: isFailed
-                    ? `${AppColors.errorColor}40`
-                    : `${statusColor}40`,
-                backgroundColor: isFailed
-                    ? `${AppColors.errorColor}15`
-                    : `${statusColor}15`,
-            },
-        ]}>
+                styles.statusChip,
+                {
+                    borderColor: isFailed
+                        ? `${AppColors.errorColor}40`
+                        : `${statusColor}40`,
+                    backgroundColor: isFailed
+                        ? `${AppColors.errorColor}15`
+                        : `${statusColor}15`,
+                },
+            ]}>
               <Text style={[
-            styles.statusText,
-            { color: isFailed ? AppColors.errorColor : statusColor },
-        ]}>
+                styles.statusText,
+                { color: isFailed ? AppColors.errorColor : statusColor },
+            ]}>
                 {isFailed ? t('network.failedNetworkError') : String(status)}
               </Text>
             </View>
@@ -154,21 +153,21 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </View>
             <View style={styles.metaValueRow}>
               {duration != null && !isFailed && (<View style={[
-                styles.perfBadge,
-                {
-                    backgroundColor: `${getDurationColor(duration)}15`,
-                    borderColor: `${getDurationColor(duration)}40`,
-                },
-            ]}>
+                    styles.perfBadge,
+                    {
+                        backgroundColor: `${getDurationColor(duration)}15`,
+                        borderColor: `${getDurationColor(duration)}40`,
+                    },
+                ]}>
                   <Text style={[
-                styles.perfBadgeText,
-                { color: getDurationColor(duration) },
-            ]}>
+                    styles.perfBadgeText,
+                    { color: getDurationColor(duration) },
+                ]}>
                     {duration < DURATION_FAST_MS
-                ? t('network.perf.fast')
-                : duration < DURATION_SLOW_MS
-                    ? t('network.perf.moderate')
-                    : t('network.perf.slow')}
+                    ? t('network.perf.fast')
+                    : duration < DURATION_SLOW_MS
+                        ? t('network.perf.moderate')
+                        : t('network.perf.slow')}
                   </Text>
                 </View>)}
               <Text style={styles.metaValue}>
@@ -185,25 +184,25 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 </Text>
                 <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 10.5, color: getDurationColor(duration) }}>
                   {duration < DURATION_FAST_MS
-                ? t('network.perf.fast')
-                : duration < DURATION_SLOW_MS
-                    ? t('network.perf.moderate')
-                    : t('network.perf.slow')}
+                    ? t('network.perf.fast')
+                    : duration < DURATION_SLOW_MS
+                        ? t('network.perf.moderate')
+                        : t('network.perf.slow')}
                 </Text>
               </View>
 
               <View style={{
-                height: 6,
-                backgroundColor: AppColors.grayBorderSecondary,
-                borderRadius: 3,
-                overflow: 'hidden',
-            }}>
+                    height: 6,
+                    backgroundColor: AppColors.grayBorderSecondary,
+                    borderRadius: 3,
+                    overflow: 'hidden',
+                }}>
                 <View style={{
-                height: '100%',
-                width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
-                backgroundColor: getDurationColor(duration),
-                borderRadius: 3,
-            }}/>
+                    height: '100%',
+                    width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
+                    backgroundColor: getDurationColor(duration),
+                    borderRadius: 3,
+                }}/>
               </View>
 
               <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 1 }}>
@@ -239,21 +238,21 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                 {url && url.length > 50 && (<TouchableScale onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
                     <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors.purple,
-            }}>
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors.purple,
+                }}>
                       {urlExpanded ? t('network.showLess') : t('network.showMore')}
                     </Text>
                   </TouchableScale>)}
                 
                 {url && (<TouchableScale onPress={() => handleOpenExternalLink(url)} hitSlop={8}>
                     <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors.purple,
-                textDecorationLine: 'underline',
-            }}>
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors.purple,
+                    textDecorationLine: 'underline',
+                }}>
                       {t('network.open')}
                     </Text>
                   </TouchableScale>)}
@@ -261,25 +260,24 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </View>
             
             <View style={{
-            backgroundColor: AppColors.slate50,
-            borderRadius: 8,
-            padding: 8,
-            borderWidth: 1.5,
-            borderColor: AppColors.slate200,
-            width: '100%',
-            marginTop: 2,
-        }}>
+                backgroundColor: AppColors.slate50,
+                borderRadius: 8,
+                padding: 8,
+                borderWidth: 1.5,
+                borderColor: AppColors.slate200,
+                width: '100%',
+                marginTop: 2,
+            }}>
               <Text selectable={true} numberOfLines={urlExpanded ? undefined : 2} ellipsizeMode="tail" style={{
-            fontSize: 11,
-            textAlign: 'left',
-            lineHeight: 16.5,
-        }}>
+                fontSize: 11,
+                textAlign: 'left',
+                lineHeight: 16.5,
+            }}>
                 {renderFormattedUrl(url)}
               </Text>
             </View>
           </View>
-        </View>
-      </Animated.View>
+        </View>)}
     </View>);
 };
 export default MetaAccordion;

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

@@ -143,3 +143,11 @@ export declare const HeadphonesIcon: ({ color, size, }: IconProps) => React.JSX.
 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

@@ -786,3 +786,45 @@ export const LifeBuoyIcon = ({ color = AppColors.white, size = 20, }) => (<Svg w
     <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.16";
+export declare const LIB_VERSION = "2.3.18";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.16';
+export const LIB_VERSION = '2.3.18';