react-native-inapp-inspector 2.3.16 → 2.3.17

package/src/components/Inspector/MainScreen.tsx

@@ -31,7 +31,9 @@ import CrashDetail from './CrashDetail';
 import DeviceInfoTab from './DeviceInfoTab';
 import StorageTab from './StorageTab';
 import DebuggingTab from './DebuggingTab';
+import {MediaGalleryTab} from './MediaGalleryTab';
 import SettingsPanel from './SettingsPanel';
+
 import NpmUpdateToast from './NpmUpdateToast';
 import NpmStarPrompt from './NpmStarPrompt';
 import FeedbackModal from './FeedbackModal';
@@ -74,18 +76,6 @@ const MainScreen = () => {
     (activeTab === 'crash' && selectedCrash != null);
 
   // ─── 60 FPS Transition Animations ──────────────────────────────────────────
-  const detailAnim = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    if (isDetailActive) {
-      detailAnim.setValue(0);
-      Animated.spring(detailAnim, {
-        toValue: 1,
-        friction: 8,
-        tension: 65,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [isDetailActive]);
 
   const settingsAnim = useRef(new Animated.Value(0)).current;
   useEffect(() => {
@@ -95,7 +85,7 @@ const MainScreen = () => {
         toValue: 1,
         friction: 8,
         tension: 65,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start();
     }
   }, [settingsPage !== null]);
@@ -108,21 +98,11 @@ const MainScreen = () => {
         toValue: 1,
         friction: 8,
         tension: 65,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start();
     }
   }, [isFeedbackOpen]);
 
-  const tabAnim = useRef(new Animated.Value(1)).current;
-  useEffect(() => {
-    tabAnim.setValue(0);
-    Animated.timing(tabAnim, {
-      toValue: 1,
-      duration: 150,
-      useNativeDriver: true,
-    }).start();
-  }, [activeTab]);
-
   return (
     <>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
@@ -159,30 +139,17 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{flex: 1}}>
-                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible unless in detail/settings/feedback) ─── */}
-                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar />}
-
-                {isReady ? (
-                  <View style={{flex: 1}}>
-                    {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
-                    <Animated.View
-                      style={[
-                        {
-                          flex: 1,
-                          opacity: tabAnim,
-                          transform: [
-                            {
-                              translateY: tabAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [6, 0],
-                              }),
-                            },
-                          ],
-                        },
-                        (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
-                          pointerEvents: 'none',
-                        },
-                      ]}>
+                {/* ─── Persistent Content Layer (TabBar + List, never unmounted or hidden with display:none) ─── */}
+                <View
+                  style={{flex: 1}}
+                  pointerEvents={
+                    isDetailActive || settingsPage !== null || isFeedbackOpen
+                      ? 'none'
+                      : 'auto'
+                  }>
+                  <TabBar />
+                  {isReady ? (
+                    <View style={{flex: 1}}>
                       {activeTab === 'apis' && <NetworkTab />}
                       {activeTab === 'logs' && <ConsoleTab />}
                       {activeTab === 'analytics' && <AnalyticsTab />}
@@ -195,44 +162,36 @@ const MainScreen = () => {
                       {Platform.OS === 'android' &&
                         isLocalDebugEnvironment() &&
                         activeTab === 'debugging' && <DebuggingTab />}
-                    </Animated.View>
+                    </View>
+                  ) : (
+                    <MainScreenSkeleton />
+                  )}
+                </View>
 
-                    {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
-                    {isDetailActive && (
-                      <Animated.View
-                        style={[
-                          StyleSheet.absoluteFill,
-                          {
-                            backgroundColor: AppColors.contentBg,
-                            opacity: detailAnim,
-                            transform: [
-                              {
-                                translateX: detailAnim.interpolate({
-                                  inputRange: [0, 1],
-                                  outputRange: [32, 0],
-                                }),
-                              },
-                            ],
-                          },
-                        ]}>
-                        {activeTab === 'apis' && selected != null && (
-                          <NetworkDetail />
-                        )}
-                        {activeTab === 'analytics' && selectedEvent != null && (
-                          <AnalyticsDetail event={selectedEvent} />
-                        )}
-                        {activeTab === 'logs' && selectedLog != null && (
-                          <LogDetail />
-                        )}
-                        {activeTab === 'redux' && <ReduxDetail />}
-                        {activeTab === 'crash' && selectedCrash != null && (
-                          <CrashDetail />
-                        )}
-                      </Animated.View>
+                {/* ─── Detail View Layer (Solid overlay covering TabBar + Content with zero layout flicker) ─── */}
+                {isDetailActive && (
+                  <View
+                    style={[
+                      StyleSheet.absoluteFill,
+                      {
+                        backgroundColor: AppColors.contentBg,
+                        zIndex: 10,
+                      },
+                    ]}>
+                    {activeTab === 'apis' && selected != null && (
+                      <NetworkDetail />
+                    )}
+                    {activeTab === 'analytics' && selectedEvent != null && (
+                      <AnalyticsDetail event={selectedEvent} />
+                    )}
+                    {activeTab === 'logs' && selectedLog != null && (
+                      <LogDetail />
+                    )}
+                    {activeTab === 'redux' && <ReduxDetail />}
+                    {activeTab === 'crash' && selectedCrash != null && (
+                      <CrashDetail />
                     )}
                   </View>
-                ) : (
-                  <MainScreenSkeleton />
                 )}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
@@ -319,12 +278,12 @@ const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
         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/MediaGalleryTab.tsx

@@ -0,0 +1,355 @@
+import React, {useState, useEffect, useMemo, useCallback} from 'react';
+import {
+  Alert,
+  Dimensions,
+  FlatList,
+  Image,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
+import TouchableScale from '../TouchableScale';
+import EmptyState from '../EmptyState';
+import {
+  CameraIcon,
+  FilmIcon,
+  GifIcon,
+  ImageIcon,
+  SendIcon,
+  TrashIcon,
+  VideoCameraIcon,
+} from '../NetworkIcons';
+import {MediaPreviewModal} from './MediaPreviewModal';
+import {
+  ScreenCapture,
+  CapturedMediaItem,
+} from '../../capture';
+import {formatBytes} from '../../helpers';
+import {showToast} from '../../helpers/toast';
+import {useTranslation} from '../../i18n';
+
+export const MediaGalleryTab: React.FC = () => {
+  const {t} = useTranslation();
+  const [mediaList, setMediaList] = useState<CapturedMediaItem[]>([]);
+  const [refreshing, setRefreshing] = useState(false);
+  const [selectedFilter, setSelectedFilter] = useState<'all' | 'image' | 'video' | 'gif'>('all');
+  const [selectedItem, setSelectedItem] = useState<CapturedMediaItem | null>(null);
+
+  const loadMedia = useCallback(async () => {
+    try {
+      const items = await ScreenCapture.getMediaList();
+      setMediaList(items);
+    } catch {
+      setMediaList([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadMedia();
+  }, [loadMedia]);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await loadMedia();
+    setRefreshing(false);
+  };
+
+  const filteredMedia = useMemo(() => {
+    if (selectedFilter === 'all') return mediaList;
+    return mediaList.filter(item => item.type === selectedFilter);
+  }, [mediaList, selectedFilter]);
+
+  const totalStorageBytes = useMemo(() => {
+    return mediaList.reduce((sum, item) => sum + (item.sizeBytes || 0), 0);
+  }, [mediaList]);
+
+  const handleDeleteItem = async (item: CapturedMediaItem) => {
+    await ScreenCapture.deleteMedia(item.uri);
+    await loadMedia();
+    showToast(t('mediaGallery.deleted'));
+  };
+
+  const handleClearAll = () => {
+    Alert.alert(
+      t('mediaGallery.purgeTitle'),
+      t('mediaGallery.purgeMessage', {count: mediaList.length, size: formatBytes(totalStorageBytes)}),
+      [
+        {text: t('common.cancel'), style: 'cancel'},
+        {
+          text: t('common.clearAll'),
+          style: 'destructive',
+          onPress: async () => {
+            await ScreenCapture.clearAllMedia();
+            await loadMedia();
+            showToast(t('mediaGallery.allPurged'));
+          },
+        },
+      ],
+    );
+  };
+
+  const handleConvertToGif = async (item: CapturedMediaItem) => {
+    const gifResult = await ScreenCapture.convertToGif(item.uri, {fps: 12, width: 480});
+    if (gifResult) {
+      await loadMedia();
+    }
+  };
+
+  const renderItem = ({item}: {item: CapturedMediaItem}) => {
+    const isVideo = item.type === 'video';
+    const isGif = item.type === 'gif';
+
+    return (
+      <TouchableScale
+        onPress={() => setSelectedItem(item)}
+        style={galleryStyles.card}>
+        <View style={galleryStyles.thumbnailContainer}>
+          <Image
+            source={{uri: item.uri}}
+            style={galleryStyles.thumbnail}
+            resizeMode="cover"
+          />
+          <View style={galleryStyles.typeBadge}>
+            {isVideo ? (
+              <FilmIcon size={11} color={AppColors.sky400} />
+            ) : isGif ? (
+              <GifIcon size={11} color={AppColors.warningAmber} />
+            ) : (
+              <ImageIcon size={11} color={AppColors.emerald500} />
+            )}
+            <Text style={galleryStyles.typeBadgeText}>
+              {item.format.toUpperCase()}
+            </Text>
+          </View>
+        </View>
+
+        <View style={galleryStyles.cardInfo}>
+          <Text style={galleryStyles.cardTitle} numberOfLines={1}>
+            {item.filename}
+          </Text>
+          <View style={galleryStyles.cardMetaRow}>
+            <Text style={galleryStyles.cardMeta}>
+              {formatBytes(item.sizeBytes)}
+            </Text>
+            <Text style={galleryStyles.cardMetaDot}>•</Text>
+            <Text style={galleryStyles.cardMeta}>
+              {new Date(item.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}
+            </Text>
+          </View>
+        </View>
+      </TouchableScale>
+    );
+  };
+
+  return (
+    <View style={galleryStyles.container}>
+      {/* Top Bar with Filter Chips and Clear All */}
+      <View style={galleryStyles.filterBar}>
+        <View style={galleryStyles.chipGroup}>
+          {(['all', 'image', 'video', 'gif'] as const).map(filterKey => {
+            const isActive = selectedFilter === filterKey;
+            const label =
+              filterKey === 'all'
+                ? t('mediaGallery.all', {count: mediaList.length})
+                : filterKey === 'image'
+                ? t('mediaGallery.photos')
+                : filterKey === 'video'
+                ? t('mediaGallery.videos')
+                : t('mediaGallery.gifs');
+
+            return (
+              <TouchableOpacity
+                key={filterKey}
+                onPress={() => setSelectedFilter(filterKey)}
+                style={[
+                  galleryStyles.chip,
+                  isActive && galleryStyles.chipActive,
+                ]}>
+                <Text
+                  style={[
+                    galleryStyles.chipText,
+                    isActive && galleryStyles.chipTextActive,
+                  ]}>
+                  {label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        {mediaList.length > 0 && (
+          <TouchableOpacity
+            onPress={handleClearAll}
+            style={galleryStyles.clearBtn}
+            hitSlop={{top: 8, bottom: 8, left: 8, right: 8}}>
+            <TrashIcon size={13} color={AppColors.red500} />
+            <Text style={galleryStyles.clearBtnText}>{t('mediaGallery.purge', {size: formatBytes(totalStorageBytes)})}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Grid of Media Items */}
+      <FlatList
+        data={filteredMedia}
+        keyExtractor={item => item.id}
+        renderItem={renderItem}
+        numColumns={2}
+        columnWrapperStyle={galleryStyles.columnWrapper}
+        contentContainerStyle={galleryStyles.listContent}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={AppColors.sky400} />
+        }
+        ListEmptyComponent={
+          <EmptyState
+            customTitle={t('mediaGallery.noMediaTitle')}
+            customSub={t('mediaGallery.noMediaDesc')}
+          />
+        }
+      />
+
+
+      {/* Fullscreen Preview Modal */}
+      <MediaPreviewModal
+        item={selectedItem}
+        visible={!!selectedItem}
+        onClose={() => setSelectedItem(null)}
+        onDelete={handleDeleteItem}
+        onConvertToGif={handleConvertToGif}
+      />
+    </View>
+  );
+};
+
+const {width: WINDOW_WIDTH} = Dimensions.get('window');
+const CARD_WIDTH = (WINDOW_WIDTH - 36) / 2;
+
+const galleryStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: AppColors.slate850,
+  },
+  filterBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: AppColors.borderGlassLight,
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  chipGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  chip: {
+    paddingHorizontal: 9,
+    paddingVertical: 4.5,
+    borderRadius: 6,
+    backgroundColor: AppColors.whiteAlpha06,
+    borderWidth: 1,
+    borderColor: AppColors.whiteAlpha10,
+  },
+  chipActive: {
+    backgroundColor: `${AppColors.sky400}2E`,
+    borderColor: AppColors.sky400,
+  },
+  chipText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 11,
+    color: AppColors.slate400,
+  },
+  chipTextActive: {
+    fontFamily: AppFonts.interBold,
+    color: AppColors.sky400,
+  },
+  clearBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    backgroundColor: `${AppColors.red500}1F`,
+    borderWidth: 1,
+    borderColor: `${AppColors.red500}4D`,
+  },
+  clearBtnText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 10.5,
+    color: AppColors.red500,
+  },
+  listContent: {
+    padding: 12,
+    gap: 12,
+  },
+  columnWrapper: {
+    gap: 12,
+  },
+  card: {
+    width: CARD_WIDTH,
+    backgroundColor: AppColors.slate800,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: AppColors.borderGlassLight,
+    overflow: 'hidden',
+  },
+  thumbnailContainer: {
+    width: '100%',
+    height: 110,
+    backgroundColor: AppColors.slate850,
+    position: 'relative',
+  },
+  thumbnail: {
+    width: '100%',
+    height: '100%',
+  },
+  typeBadge: {
+    position: 'absolute',
+    top: 6,
+    right: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+    backgroundColor: AppColors.badgeGlassDark,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: AppColors.borderGlassMedium,
+  },
+  typeBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9,
+    color: AppColors.slate200,
+  },
+  cardInfo: {
+    padding: 8,
+    gap: 3,
+  },
+  cardTitle: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 11.5,
+    color: AppColors.white,
+  },
+  cardMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  cardMeta: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 10,
+    color: AppColors.slate400,
+  },
+  cardMetaDot: {
+    fontSize: 10,
+    color: AppColors.whiteAlpha30,
+  },
+});