react-native-inapp-inspector 2.3.16 → 2.3.17

package/src/components/Inspector/SettingsPanel.tsx

@@ -64,7 +64,15 @@ import {
   GitHubIcon,
   InfoCircleIcon,
   CopyIcon,
+  FilmIcon,
+  CameraIcon,
+  VideoCameraIcon,
+  MicrophoneIcon,
+  GifIcon,
+  ImageIcon,
 } from '../NetworkIcons';
+import {ScreenCapture} from '../../capture';
+
 import {LIB_VERSION} from '../../constants';
 import {
   copyToClipboard,
@@ -270,6 +278,7 @@ const SettingsPanel = () => {
     });
   }, [tabVisibility]);
 
+
   const hasUnsavedChanges = useMemo(() => {
     return allModules.some(
       m =>
@@ -306,6 +315,7 @@ const SettingsPanel = () => {
               performance: Boolean(tabVisibility?.performance),
               debugging: Boolean(tabVisibility?.debugging),
             });
+
           },
         },
         {
@@ -579,6 +589,11 @@ const SettingsPanel = () => {
                 label: t('settings.ramLimits', 'RAM & Limits'),
                 Icon: BrainIcon,
               },
+              {
+                key: 'capture' as const,
+                label: t('settings.screenVideoCapture', 'Screen & Video Capture'),
+                Icon: CameraIcon,
+              },
               {
                 key: 'about' as const,
                 label: t('settings.aboutAndSpecs', 'About & Specs'),
@@ -2284,6 +2299,293 @@ const SettingsPanel = () => {
             </View>
           </View>
         )}
+        {settingsActiveSubTab === 'capture' && (
+          <View style={{gap: 12}}>
+            {/* Screenshot Preferences Card */}
+            <View
+              style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 12,
+              }}>
+              <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+                <View
+                  style={{
+                    width: 36,
+                    height: 36,
+                    borderRadius: 10,
+                    backgroundColor: AppColors.purpleShade50,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  <CameraIcon color={AppColors.purple} size={16} />
+                </View>
+                <View style={{flex: 1}}>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 14,
+                      lineHeight: 18,
+                      color: AppColors.primaryBlack,
+                    }}>
+                    {t('settings.media.screenshotCardTitle', 'Screenshot Capture Settings')}
+                  </Text>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interRegular,
+                      fontSize: 11,
+                      lineHeight: 15,
+                      color: AppColors.grayText,
+                      marginTop: 1,
+                    }}>
+                    {t('settings.media.screenshotCardDesc', 'Image encoding format, compression quality and overlay auto-hide')}
+                  </Text>
+                </View>
+              </View>
+
+              {renderSettingRow({
+                icon: <ImageIcon color={AppColors.purple} size={16} />,
+                label: t('settings.media.imageFormat', 'Image Format'),
+                description: t('settings.media.imageFormatDesc', 'Export formats (PNG lossless, JPEG lossy, WebP)'),
+                right: (
+                  <View style={{flexDirection: 'row', gap: 4}}>
+                    {['PNG', 'JPEG', 'WEBP'].map(fmt => (
+                      <View
+                        key={fmt}
+                        style={{
+                          paddingHorizontal: 8,
+                          paddingVertical: 4,
+                          borderRadius: 6,
+                          backgroundColor: fmt === 'PNG' ? AppColors.purple : `${AppColors.purple}1A`,
+                        }}>
+                        <Text
+                          style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: fmt === 'PNG' ? AppColors.white : AppColors.purple,
+                          }}>
+                          {fmt}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ),
+              })}
+
+              {renderSettingRow({
+                icon: <EyeIcon color={AppColors.purple} size={16} />,
+                label: t('settings.media.autoHide', 'Auto-Hide Inspector During Capture'),
+                description: t('settings.media.autoHideDesc', 'Temporarily hides the inspector overlay during screen capture'),
+                isLast: true,
+                right: (
+                  <View
+                    style={{
+                      paddingHorizontal: 8,
+                      paddingVertical: 4,
+                      borderRadius: 6,
+                      backgroundColor: `${AppColors.emerald500}26`,
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.emerald500,
+                      }}>
+                      {t('settings.media.enabled', 'ON')}
+                    </Text>
+                  </View>
+                ),
+              })}
+            </View>
+
+            {/* Video & GIF Recording Card */}
+            <View
+              style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 12,
+              }}>
+              <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+                <View
+                  style={{
+                    width: 36,
+                    height: 36,
+                    borderRadius: 10,
+                    backgroundColor: AppColors.purpleShade50,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  <VideoCameraIcon color={AppColors.purple} size={16} />
+                </View>
+                <View style={{flex: 1}}>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 14,
+                      lineHeight: 18,
+                      color: AppColors.primaryBlack,
+                    }}>
+                    {t('settings.media.videoCardTitle', 'Video Recording & GIF Conversion')}
+                  </Text>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interRegular,
+                      fontSize: 11,
+                      lineHeight: 15,
+                      color: AppColors.grayText,
+                      marginTop: 1,
+                    }}>
+                    {t('settings.media.videoCardDesc', 'ReplayKit hardware encoding, frame capture fallback and GIF generation')}
+                  </Text>
+                </View>
+              </View>
+
+              {renderSettingRow({
+                icon: <MicrophoneIcon color={AppColors.purple} size={16} />,
+                label: t('settings.media.audioMode', 'Audio Source'),
+                description: t('settings.media.audioModeDesc', 'Record video with muted, app audio, or microphone commentary'),
+                right: (
+                  <View style={{flexDirection: 'row', gap: 4}}>
+                    {['Muted', 'App', 'Mic'].map((aud, i) => (
+                      <View
+                        key={aud}
+                        style={{
+                          paddingHorizontal: 7,
+                          paddingVertical: 4,
+                          borderRadius: 6,
+                          backgroundColor: i === 0 ? AppColors.purple : `${AppColors.purple}1A`,
+                        }}>
+                        <Text
+                          style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: i === 0 ? AppColors.white : AppColors.purple,
+                          }}>
+                          {aud}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ),
+              })}
+
+              {renderSettingRow({
+                icon: <FilmIcon color={AppColors.purple} size={16} />,
+                label: t('settings.media.frameRate', 'Recording Frame Rate (FPS)'),
+                description: t('settings.media.frameRateDesc', 'Target video smoothness: 15, 24, 30, or 60 FPS'),
+                right: (
+                  <View style={{flexDirection: 'row', gap: 4}}>
+                    {['15', '24', '30', '60'].map(fps => (
+                      <View
+                        key={fps}
+                        style={{
+                          paddingHorizontal: 6,
+                          paddingVertical: 4,
+                          borderRadius: 6,
+                          backgroundColor: fps === '24' ? AppColors.purple : `${AppColors.purple}1A`,
+                        }}>
+                        <Text
+                          style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: fps === '24' ? AppColors.white : AppColors.purple,
+                          }}>
+                          {fps}fps
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ),
+              })}
+
+              {renderSettingRow({
+                icon: <GifIcon color={AppColors.purple} size={16} />,
+                label: t('settings.media.gifAutoOpt', 'Auto GIF Optimization'),
+                description: t('settings.media.gifAutoOptDesc', 'Automatic palette reduction and frame skip for lightweight animated GIFs'),
+                isLast: true,
+                right: (
+                  <View
+                    style={{
+                      paddingHorizontal: 8,
+                      paddingVertical: 4,
+                      borderRadius: 6,
+                      backgroundColor: `${AppColors.emerald500}26`,
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.emerald500,
+                      }}>
+                      ON
+                    </Text>
+                  </View>
+                ),
+              })}
+            </View>
+
+            {/* Media Storage Cache Management */}
+            <View
+              style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 16,
+              }}>
+              {renderSettingRow({
+                icon: <TrashIcon color={AppColors.errorColor} size={16} />,
+                label: t('settings.media.purgeAll', 'Purge Captured Media Cache'),
+                description: t('settings.media.purgeAllDesc', 'Delete all local screenshots, screen recordings and converted GIFs'),
+                isLast: true,
+                onPress: () => {
+                  Alert.alert(
+                    t('settings.media.purgeConfirmTitle', 'Purge Media Storage?'),
+                    t('settings.media.purgeConfirmMessage', 'This will permanently delete all captured screenshots and videos from disk.'),
+                    [
+                      {text: t('common.cancel', 'Cancel'), style: 'cancel'},
+                      {
+                        text: t('settings.media.purgeCacheBtn', 'Purge All'),
+                        style: 'destructive',
+                        onPress: async () => {
+                          await ScreenCapture.clearAllMedia();
+                          showToast(t('settings.media.purgedSuccess', 'Media cache cleared successfully'));
+                        },
+                      },
+                    ],
+                  );
+                },
+                right: (
+                  <View
+                    style={{
+                      paddingHorizontal: 12,
+                      paddingVertical: 6,
+                      borderRadius: 8,
+                      backgroundColor: `${AppColors.errorColor}14`,
+                      borderWidth: 1,
+                      borderColor: `${AppColors.errorColor}33`,
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 11,
+                        lineHeight: 14,
+                        color: AppColors.errorColor,
+                      }}>
+                      {t('settings.media.purgeCacheBtn', 'Purge All')}
+                    </Text>
+                  </View>
+                ),
+              })}
+            </View>
+          </View>
+        )}
         {settingsActiveSubTab === 'about' && (
           <View style={{gap: 14}}>
             {/* Header Hero Branding Card */}
@@ -4221,6 +4523,7 @@ const SettingsPanel = () => {
     );
   }
 
+
   const subPageAnim = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     if (settingsPage !== 'main') {

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

@@ -949,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,
@@ -1014,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,
@@ -1079,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

@@ -148,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);
@@ -236,16 +233,14 @@ const TabBar = React.memo(() => {
                     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,
@@ -253,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>