react-native-inapp-inspector 2.3.8 → 2.3.9

package/src/components/Inspector/ConsoleTab.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 import {
   FlatList,
   Pressable,
@@ -30,6 +30,7 @@ import {
   ErrorCircleIcon,
   AnalyticsIcon,
   HeaderPauseIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 const ConsoleTab = React.memo(() => {
@@ -49,6 +50,8 @@ const ConsoleTab = React.memo(() => {
     setIsConsolePaused,
   } = useInspector();
 
+  const listRef = useRef<FlatList>(null);
+
   const renderItem = useCallback(
     ({item, index}: {item: any; index: number}) => (
       <AnimatedEntrance index={index} distance={8}>
@@ -668,6 +671,7 @@ const ConsoleTab = React.memo(() => {
       </View>
 
       <FlatList
+        ref={listRef}
         data={filteredConsoleLogs}
         keyExtractor={keyExtractor}
         ListHeaderComponent={listHeader}
@@ -705,6 +709,29 @@ const ConsoleTab = React.memo(() => {
         ]}
         keyboardShouldPersistTaps="handled"
       />
+
+      <TouchableScale
+        onPress={() => {
+          try {
+            listRef.current?.scrollToOffset({
+              offset: 0,
+              animated: true,
+            });
+          } catch {
+            try {
+              listRef.current?.scrollToIndex({
+                index: 0,
+                animated: true,
+              });
+            } catch {}
+          }
+        }}
+        hitSlop={12}
+        style={styles.scrollTopBtn}>
+        <View style={{transform: [{rotate: '180deg'}]}}>
+          <ChevronIcon color={AppColors.white} size={18} />
+        </View>
+      </TouchableScale>
     </View>
   );
 });

package/src/components/Inspector/CrashTab.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Alert,
   FlatList,
@@ -18,6 +18,7 @@ import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import EmptyState from '../EmptyState';
 import EndOfListFooter from '../EndOfListFooter';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
 import styles from '../../styles';
@@ -66,6 +67,7 @@ import {
   RepeatIcon,
   CodeBracketsIcon,
   FilterIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 const getRelativeTime = (timestamp: number): string => {
@@ -88,6 +90,7 @@ const CrashTab = React.memo(() => {
   const {t} = useTranslation();
   const {crashRecords, selectedCrash, setSelectedCrash} = useInspector();
 
+  const listRef = useRef<FlatList>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterType, setFilterType] = useState<CrashFilterType>('all');
   const [crashFilters, setCrashFilters] = useState<CrashFilters>(
@@ -500,6 +503,8 @@ const CrashTab = React.memo(() => {
               </TouchableScale>
             </View>
 
+            <FeatureUnderDevNotice featureName="Crash & Exception Sentinel" />
+
             {/* ─── Filter Chips ─── */}
             <ScrollView
               horizontal
@@ -579,19 +584,45 @@ const CrashTab = React.memo(() => {
           )}
         </ScrollView>
       ) : (
-        <FlatList
-          data={filteredList}
-          keyExtractor={item => item.id}
-          renderItem={renderCard}
-          initialNumToRender={12}
-          maxToRenderPerBatch={8}
-          windowSize={5}
-          removeClippedSubviews={true}
-          renderToHardwareTextureAndroid={true}
-          contentContainerStyle={localStyles.listContent}
-          showsVerticalScrollIndicator={false}
-          ListFooterComponent={<EndOfListFooter />}
-        />
+        <>
+          <FlatList
+            ref={listRef}
+            data={filteredList}
+            keyExtractor={item => item.id}
+            renderItem={renderCard}
+            initialNumToRender={12}
+            maxToRenderPerBatch={8}
+            windowSize={5}
+            removeClippedSubviews={true}
+            renderToHardwareTextureAndroid={true}
+            contentContainerStyle={localStyles.listContent}
+            showsVerticalScrollIndicator={false}
+            ListFooterComponent={<EndOfListFooter />}
+          />
+
+          <TouchableScale
+            onPress={() => {
+              try {
+                listRef.current?.scrollToOffset({
+                  offset: 0,
+                  animated: true,
+                });
+              } catch {
+                try {
+                  listRef.current?.scrollToIndex({
+                    index: 0,
+                    animated: true,
+                  });
+                } catch {}
+              }
+            }}
+            hitSlop={12}
+            style={styles.scrollTopBtn}>
+            <View style={{transform: [{rotate: '180deg'}]}}>
+              <ChevronIcon color={AppColors.white} size={18} />
+            </View>
+          </TouchableScale>
+        </>
       )}
 
       {/* Filter Modal */}

package/src/components/Inspector/FeatureUnderDevNotice.tsx

@@ -0,0 +1,94 @@
+import React, {useState} from 'react';
+import {StyleSheet, Text, View, Pressable} from 'react-native';
+import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
+import {WarningTriangleIcon, SparkleIcon, ClearIcon} from '../NetworkIcons';
+
+interface FeatureUnderDevNoticeProps {
+  featureName?: string;
+  compact?: boolean;
+}
+
+export const FeatureUnderDevNotice: React.FC<FeatureUnderDevNoticeProps> = ({
+  featureName,
+  compact = false,
+}) => {
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  if (isDismissed) return null;
+
+  return (
+    <View style={[styles.container, compact && styles.containerCompact]}>
+      <View style={styles.contentRow}>
+        <View style={styles.badgeWrap}>
+          <WarningTriangleIcon color={AppColors.warningIconGold} size={12} />
+          <Text style={styles.badgeText}>IN ACTIVE DEVELOPMENT</Text>
+        </View>
+
+        <Pressable
+          onPress={() => setIsDismissed(true)}
+          hitSlop={8}
+          style={styles.dismissBtn}
+          accessible={true}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss notice">
+          <ClearIcon color={AppColors.grayTextWeak} size={11} />
+        </Pressable>
+      </View>
+
+      <Text style={styles.messageText}>
+        {featureName ? `${featureName} is` : 'This module is'} currently in active
+        development. Results and metrics may vary in accuracy. We are continuously
+        improving this feature for upcoming releases.
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 12,
+    marginTop: 8,
+    marginBottom: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    borderRadius: 8,
+    backgroundColor: `${AppColors.warningIconGold}12`,
+    borderWidth: 1,
+    borderColor: `${AppColors.warningIconGold}30`,
+  },
+  containerCompact: {
+    marginTop: 4,
+    marginBottom: 4,
+    paddingVertical: 7,
+    paddingHorizontal: 10,
+  },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 4,
+  },
+  badgeWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4.5,
+  },
+  badgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9.5,
+    color: AppColors.warningIconGold,
+    letterSpacing: 0.4,
+  },
+  dismissBtn: {
+    padding: 2,
+  },
+  messageText: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 10.5,
+    color: AppColors.grayText,
+    lineHeight: 15,
+  },
+});
+
+export default FeatureUnderDevNotice;