react-native-inapp-inspector 2.3.16 → 2.3.18

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -17,7 +17,8 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, GitHubIcon, InfoCircleIcon, CopyIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, GitHubIcon, InfoCircleIcon, CopyIcon, FilmIcon, CameraIcon, VideoCameraIcon, MicrophoneIcon, GifIcon, ImageIcon, } from '../NetworkIcons';
+import { ScreenCapture } from '../../capture';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard, isLocalDebugEnvironment, getAppName, getBundleIdentifier, getAppVersionAndBuild, } from '../../helpers';
 import { showToast } from '../../helpers/toast';
@@ -365,6 +366,11 @@ const SettingsPanel = () => {
                 label: t('settings.ramLimits', 'RAM & Limits'),
                 Icon: BrainIcon,
             },
+            {
+                key: 'capture',
+                label: t('settings.screenVideoCapture', 'Screen & Video Capture'),
+                Icon: CameraIcon,
+            },
             {
                 key: 'about',
                 label: t('settings.aboutAndSpecs', 'About & Specs'),
@@ -1715,6 +1721,245 @@ const SettingsPanel = () => {
               </View>
             </View>
           </View>)}
+        {settingsActiveSubTab === 'capture' && (<View style={{ gap: 12 }}>
+            
+            <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>
+
+            
+            <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>
+
+            
+            <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 }}>
             
             <View style={{

package/dist/esm/components/Inspector/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/Inspector/StorageTab.js

@@ -690,7 +690,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,
@@ -755,7 +755,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,
@@ -820,7 +820,7 @@ const styles = StyleSheet.create({
     textAreaInput: {
         minHeight: 90,
         maxHeight: 160,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 11,
     },
     typeSelectorStrip: {

package/dist/esm/components/Inspector/TabBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated, Platform, ScrollView, Text, View, } from 'react-native';
+import { Platform, ScrollView, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
@@ -109,10 +109,8 @@ const TabBar = React.memo(() => {
                     ? AppColors.errorColor
                     : AppColors.grayText;
             const countLabel = tab.count > 9 ? '9+' : String(tab.count);
-            const hasUnreadApis = activeTab !== 'apis' &&
-                logs.length > lastReadApisCount;
-            const hasUnreadLogs = activeTab !== 'logs' &&
-                consoleLogs.length > lastReadLogsCount;
+            const hasUnreadApis = activeTab !== 'apis' && logs.length > lastReadApisCount;
+            const hasUnreadLogs = activeTab !== 'logs' && consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes = activeTab !== 'crash' &&
                 (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
             return (<TouchableScale key={tab.key} onPress={() => {
@@ -162,22 +160,19 @@ const TabBar = React.memo(() => {
                   </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 style={{
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,
                         backgroundColor: AppColors.errorColor,
                         marginLeft: 4,
                         alignSelf: 'center',
-                        transform: [{ scale: unreadPulseAnim }],
                     }}/>)}
                 </View>
               </TouchableScale>);

package/dist/esm/components/Inspector/UpdateAvailableModal.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Platform, Linking, } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Linking, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { BrandSquareIcon } from '../BrandSquareIcon';
 import { NpmIcon } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
+import { AppFonts } from '../../styles/AppFonts';
 const CopySvg = ({ size = 14, color = '#64748B' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -168,15 +169,9 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
       </View>
     </Modal>);
 };
-const fontStack = Platform.select({
-    ios: {
-        fontFamily: 'System',
-    },
-    android: {
-        fontFamily: 'sans-serif',
-    },
-    default: {},
-});
+const fontStack = {
+    fontFamily: AppFonts.interRegular,
+};
 const styles = StyleSheet.create({
     overlay: {
         flex: 1,
@@ -377,7 +372,7 @@ const styles = StyleSheet.create({
     commandText: {
         flex: 1,
         fontSize: 11,
-        fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         color: '#38BDF8',
     },
     copyIconWrapper: {

package/dist/esm/components/JsonViewer.js

@@ -168,25 +168,23 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
                 {t('network.jsonViewer.emptyPayload')}
               </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 }}>
-                <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}>
-                <ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+                  <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
+                </ScrollView>) : (<View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>)) : (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>))))}
+                </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={{
+        {mode === 'raw' && (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={{
+              {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
                     marginTop: 10,
                     backgroundColor: `${AppColors.brandPurple}15`,
                     paddingVertical: 8,
@@ -196,21 +194,46 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
                     borderWidth: 1,
                     borderColor: `${AppColors.brandPurple}30`,
                 }}>
-                <Text style={{
+                  <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>)}
+                    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}>
+        {mode === 'table' && (fullHeight ? (<ScrollView style={{ flex: 1 }}>
               {renderTableMode()}
-            </ScrollView>) : (<ScrollView style={scrollStyle}>
+            </ScrollView>) : (<View style={localStyles.tableView}>
               {renderTableMode()}
-            </ScrollView>))}
+            </View>))}
       </View>
     </View>);
 });

package/dist/esm/components/LogCard.js

@@ -63,7 +63,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             Animated.timing(shimmerOpacity, {
                 toValue: 0,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [isNew]);
@@ -321,10 +321,10 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             </View>)}
         </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>);
 });