react-native-inapp-inspector 2.3.15 → 2.3.17

package/src/components/Inspector/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/Inspector/StorageTab.tsx

@@ -616,29 +616,6 @@ export const StorageTab = React.memo(() => {
             }
             ListFooterComponent={<View style={{height: 60}} />}
           />
-
-          <TouchableScale
-            onPress={() => {
-              try {
-                listRef.current?.scrollToOffset({
-                  offset: 0,
-                  animated: true,
-                });
-              } catch {
-                try {
-                  listRef.current?.scrollToIndex({
-                    index: 0,
-                    animated: true,
-                  });
-                } catch {}
-              }
-            }}
-            hitSlop={12}
-            style={globalStyles.scrollTopBtn}>
-            <View style={{transform: [{rotate: '180deg'}]}}>
-              <ChevronIcon color={AppColors.white} size={18} />
-            </View>
-          </TouchableScale>
         </>
       )}
 
@@ -972,7 +949,7 @@ const styles = StyleSheet.create({
     borderColor: `${AppColors.grayBorderSecondary}80`,
   },
   valuePreviewText: {
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    fontFamily: AppFonts.interRegular,
     fontSize: 11,
     color: AppColors.primaryBlack,
     lineHeight: 16,
@@ -1037,7 +1014,7 @@ const styles = StyleSheet.create({
     color: AppColors.purple,
   },
   connectGuideCode: {
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    fontFamily: AppFonts.interRegular,
     fontSize: 10,
     color: AppColors.grayText,
     lineHeight: 15,
@@ -1102,7 +1079,7 @@ const styles = StyleSheet.create({
   textAreaInput: {
     minHeight: 90,
     maxHeight: 160,
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    fontFamily: AppFonts.interRegular,
     fontSize: 11,
   },
   typeSelectorStrip: {

package/src/components/Inspector/TabBar.tsx

@@ -10,6 +10,7 @@ import {
 import {useInspector} from './InspectorContext';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
 import {
   SignalIcon,
@@ -56,60 +57,70 @@ const TabBar = React.memo(() => {
         {(
           [
             {
+              id: 1,
               key: 'apis',
               label: 'APIs',
               count: logs.length,
               icon: 'apis',
             },
             {
+              id: 2,
               key: 'logs',
               label: 'Logs',
               count: consoleLogs.length,
               icon: 'logs',
             },
             {
+              id: 3,
               key: 'analytics',
               label: 'Analytics',
               count: analyticsEvents.length,
               icon: 'analytics',
             },
             {
+              id: 4,
               key: 'redux',
               label: 'Redux',
               count: 0,
               icon: 'redux',
             },
             {
-              key: 'bundle',
-              label: 'Bundle',
+              id: 5,
+              key: 'storage',
+              label: 'Storage',
               count: 0,
-              icon: 'bundle',
+              icon: 'storage',
             },
             {
-              key: 'performance',
-              label: 'Performance',
+              id: 6,
+              key: 'device',
+              label: 'Device',
               count: 0,
-              icon: 'performance',
+              icon: 'device',
             },
             {
+              id: 7,
               key: 'crash',
               label: 'Crash',
               count: crashRecords?.length || 0,
               icon: 'crash',
             },
             {
-              key: 'device',
-              label: 'Device',
+              id: 8,
+              key: 'bundle',
+              label: 'Bundle',
               count: 0,
-              icon: 'device',
+              icon: 'bundle',
             },
             {
-              key: 'storage',
-              label: 'Storage',
+              id: 9,
+              key: 'performance',
+              label: 'Performance',
               count: 0,
-              icon: 'storage',
+              icon: 'performance',
             },
             {
+              id: 10,
               key: 'debugging',
               label: 'Debugging',
               count: 0,
@@ -137,14 +148,11 @@ const TabBar = React.memo(() => {
               : tab.key === 'crash' && tab.count > 0
               ? AppColors.errorColor
               : AppColors.grayText;
-            const countLabel =
-              tab.count > 9 ? '9+' : String(tab.count);
+            const countLabel = tab.count > 9 ? '9+' : String(tab.count);
             const hasUnreadApis =
-              activeTab !== 'apis' &&
-              logs.length > lastReadApisCount;
+              activeTab !== 'apis' && logs.length > lastReadApisCount;
             const hasUnreadLogs =
-              activeTab !== 'logs' &&
-              consoleLogs.length > lastReadLogsCount;
+              activeTab !== 'logs' && consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes =
               activeTab !== 'crash' &&
               (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
@@ -176,39 +184,63 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'redux' && (
                     <ReduxIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'bundle' && (
-                    <PackageIcon color={iconColor} size={14} />
+                  {tab.icon === 'storage' && (
+                    <DatabaseIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'performance' && (
-                    <PerformanceIcon color={iconColor} size={14} />
+                  {tab.icon === 'device' && (
+                    <SmartphoneIcon color={iconColor} size={14} />
                   )}
                   {tab.icon === 'crash' && (
                     <CrashIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'device' && (
-                    <SmartphoneIcon color={iconColor} size={14} />
+                  {tab.icon === 'bundle' && (
+                    <PackageIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'storage' && (
-                    <DatabaseIcon color={iconColor} size={14} />
+                  {tab.icon === 'performance' && (
+                    <PerformanceIcon color={iconColor} size={14} />
                   )}
                   {tab.icon === 'debugging' && (
                     <QrCodeIcon color={iconColor} size={14} />
                   )}
+                  <View
+                    style={{
+                      minWidth: 20,
+                      height: 20,
+                      paddingHorizontal: 4,
+                      borderRadius: 10,
+                      backgroundColor: isActive
+                        ? `${AppColors.white}33`
+                        : `${AppColors.purple}1F`,
+                      borderWidth: 1,
+                      borderColor: isActive
+                        ? `${AppColors.white}66`
+                        : `${AppColors.purple}40`,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9.5,
+                        lineHeight: 12,
+                        color: isActive ? AppColors.white : AppColors.purple,
+                      }}>
+                      #{tab.id}
+                    </Text>
+                  </View>
                   <Text
                     numberOfLines={1}
                     ellipsizeMode="tail"
                     style={[
                       styles.contentTabButtonText,
-                      isActive &&
-                        styles.contentTabButtonTextActive,
+                      isActive && styles.contentTabButtonTextActive,
                     ]}>
-                    {tab.label}{' '}
-                    {tab.count > 0 ? `(${countLabel})` : ''}
+                    {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
                   </Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
                     (tab.key === 'logs' && hasUnreadLogs) ||
                     (tab.key === 'crash' && hasUnreadCrashes)) && (
-                    <Animated.View
+                    <View
                       style={{
                         width: 6,
                         height: 6,
@@ -216,7 +248,6 @@ const TabBar = React.memo(() => {
                         backgroundColor: AppColors.errorColor,
                         marginLeft: 4,
                         alignSelf: 'center',
-                        transform: [{scale: unreadPulseAnim}],
                       }}
                     />
                   )}

package/src/components/Inspector/UpdateAvailableModal.tsx

@@ -15,6 +15,8 @@ import {NpmIcon} from '../NetworkIcons';
 import {LIB_VERSION} from '../../constants';
 import {copyToClipboard} from '../../helpers';
 import {showToast} from '../../helpers/toast';
+import {AppFonts} from '../../styles/AppFonts';
+import {AppColors} from '../../styles/AppColors';
 
 // ─── Crisp SVG Icons ─────────────────────────────────────────────────────────
 
@@ -289,15 +291,9 @@ export const UpdateAvailableModal: React.FC<UpdateAvailableModalProps> = ({
   );
 };
 
-const fontStack = Platform.select({
-  ios: {
-    fontFamily: 'System',
-  },
-  android: {
-    fontFamily: 'sans-serif',
-  },
-  default: {},
-});
+const fontStack = {
+  fontFamily: AppFonts.interRegular,
+};
 
 const styles = StyleSheet.create({
   overlay: {
@@ -499,7 +495,7 @@ const styles = StyleSheet.create({
   commandText: {
     flex: 1,
     fontSize: 11,
-    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+    fontFamily: AppFonts.interRegular,
     color: '#38BDF8',
   },
   copyIconWrapper: {

package/src/components/JsonViewer.tsx

@@ -293,89 +293,130 @@ const JsonViewer = React.memo(({
               </Text>
             </View>
           ) : (
-          wrap ? (
-            fullHeight ? (
-              <ScrollView style={{flex: 1}} contentContainerStyle={{flexGrow: 1}}>
-                <View style={[styles.codeBlock, {width: '100%'}]}>{tree}</View>
-              </ScrollView>
-            ) : (
-              <ScrollView style={scrollStyle} contentContainerStyle={{flexGrow: 1}}>
+            wrap ? (
+              fullHeight ? (
+                <ScrollView style={{flex: 1}} contentContainerStyle={{flexGrow: 1}}>
+                  <View style={[styles.codeBlock, {width: '100%'}]}>{tree}</View>
+                </ScrollView>
+              ) : (
                 <View style={[styles.codeBlock, {width: '100%'}]}>{tree}</View>
-              </ScrollView>
-            )
-          ) : (
-            fullHeight ? (
-              <ScrollView style={{flex: 1}} contentContainerStyle={{flexGrow: 1}}>
-                <View style={styles.codeBlock}>{tree}</View>
-              </ScrollView>
+              )
             ) : (
-              <ScrollView style={scrollStyle}>
+              fullHeight ? (
+                <ScrollView style={{flex: 1}} contentContainerStyle={{flexGrow: 1}}>
+                  <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={true}
+                    style={styles.codeBlockScroll}>
+                    <View style={styles.codeBlock}>{tree}</View>
+                  </ScrollView>
+                </ScrollView>
+              ) : (
                 <ScrollView
                   horizontal
                   showsHorizontalScrollIndicator={true}
                   style={styles.codeBlockScroll}>
                   <View style={styles.codeBlock}>{tree}</View>
                 </ScrollView>
-              </ScrollView>
+              )
             )
           )
-          )
         )}
 
         {mode === 'raw' && (
-          <ScrollView
-            style={scrollStyle}
-            contentContainerStyle={localStyles.rawContainer}
-            showsVerticalScrollIndicator={true}
-            nestedScrollEnabled={true}>
-            <HighlightText
-              text={displayRawText}
-              search={search}
-              detectLinks={rawText.length < 20000}
-              style={localStyles.rawPlainText}
-              selectable={true}
-              highlightStyle={{
-                backgroundColor: AppColors.yellowHighlight,
-                color: AppColors.primaryBlack,
-                borderRadius: 3,
-                paddingHorizontal: 2,
-              }}
-            />
-            {isTruncated && (
-              <TouchableOpacity
-                onPress={() => setShowFullRaw(true)}
-                style={{
-                  marginTop: 10,
-                  backgroundColor: `${AppColors.brandPurple}15`,
-                  paddingVertical: 8,
-                  paddingHorizontal: 12,
-                  borderRadius: 6,
-                  alignItems: 'center',
-                  borderWidth: 1,
-                  borderColor: `${AppColors.brandPurple}30`,
-                }}>
-                <Text
+          fullHeight ? (
+            <ScrollView
+              style={{flex: 1}}
+              contentContainerStyle={localStyles.rawContainer}
+              showsVerticalScrollIndicator={true}>
+              <HighlightText
+                text={displayRawText}
+                search={search}
+                detectLinks={rawText.length < 20000}
+                style={localStyles.rawPlainText}
+                selectable={true}
+                highlightStyle={{
+                  backgroundColor: AppColors.yellowHighlight,
+                  color: AppColors.primaryBlack,
+                  borderRadius: 3,
+                  paddingHorizontal: 2,
+                }}
+              />
+              {isTruncated && (
+                <TouchableOpacity
+                  onPress={() => setShowFullRaw(true)}
                   style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.brandPurple,
+                    marginTop: 10,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: `${AppColors.brandPurple}30`,
                   }}>
-                  Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
-                </Text>
-              </TouchableOpacity>
-            )}
-          </ScrollView>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 11,
+                      color: AppColors.brandPurple,
+                    }}>
+                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </ScrollView>
+          ) : (
+            <View style={localStyles.rawContainer}>
+              <HighlightText
+                text={displayRawText}
+                search={search}
+                detectLinks={rawText.length < 20000}
+                style={localStyles.rawPlainText}
+                selectable={true}
+                highlightStyle={{
+                  backgroundColor: AppColors.yellowHighlight,
+                  color: AppColors.primaryBlack,
+                  borderRadius: 3,
+                  paddingHorizontal: 2,
+                }}
+              />
+              {isTruncated && (
+                <TouchableOpacity
+                  onPress={() => setShowFullRaw(true)}
+                  style={{
+                    marginTop: 10,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: `${AppColors.brandPurple}30`,
+                  }}>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 11,
+                      color: AppColors.brandPurple,
+                    }}>
+                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          )
         )}
 
         {mode === 'table' && (
           fullHeight ? (
-            <ScrollView style={scrollStyle}>
+            <ScrollView style={{flex: 1}}>
               {renderTableMode()}
             </ScrollView>
           ) : (
-            <ScrollView style={scrollStyle}>
+            <View style={localStyles.tableView}>
               {renderTableMode()}
-            </ScrollView>
+            </View>
           )
         )}
       </View>

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>
   );
 };