react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,614 @@
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { animateNextLayout, useInspector } from './InspectorContext';
+import TouchableScale from '../TouchableScale';
+import styles from '../../styles';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import { getSize } from '../../helpers';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, GlobeIcon, } from '../NetworkIcons';
+const InsightsDashboard = () => {
+    const { logs, visibleConsoleLogs, analyticsEvents, webViewNavHistory, tabVisibility, slowRequestThreshold, insightsActiveSubTab, setInsightsActiveSubTab, switchActiveTab, reduxState, } = useInspector();
+    const apiTotal = logs.length;
+    const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) ||
+        l.status === 0 ||
+        l.status == null).length;
+    const apiSuccess = apiTotal - apiErrors;
+    const apiSuccessRate = apiTotal > 0 ? Math.round((apiSuccess / apiTotal) * 100) : 100;
+    const durations = logs
+        .filter(l => l.duration != null)
+        .map(l => l.duration);
+    const avgTime = durations.length > 0
+        ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length)
+        : null;
+    const logTotal = visibleConsoleLogs.length;
+    const logErrors = visibleConsoleLogs.filter(l => l.type === 'error').length;
+    const logWarns = visibleConsoleLogs.filter(l => l.type === 'warn').length;
+    const logInfos = visibleConsoleLogs.filter(l => l.type === 'info').length;
+    const analyticsTotal = analyticsEvents.length;
+    const uniqueEvents = new Set(analyticsEvents.map(e => e.name)).size;
+    const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' ||
+        e.name === 'page_view' ||
+        e.name === 'firebase_screen_class').length;
+    const webviewTotal = webViewNavHistory.length;
+    // --- Richer insights metrics ---
+    const slowestTime = durations.length > 0 ? Math.max(...durations) : null;
+    const fastestTime = durations.length > 0 ? Math.min(...durations) : null;
+    const slowCount = durations.filter(d => d >= slowRequestThreshold).length;
+    const status2xx = logs.filter(l => l.status != null && l.status >= 200 && l.status < 300).length;
+    const status3xx = logs.filter(l => l.status != null && l.status >= 300 && l.status < 400).length;
+    const status4xx = logs.filter(l => l.status != null && l.status >= 400 && l.status < 500).length;
+    const status5xx = logs.filter(l => l.status != null && l.status >= 500).length;
+    const totalSignals = apiTotal + logTotal + analyticsTotal + webviewTotal;
+    const totalIssues = apiErrors + logErrors;
+    const activeModules = [
+        tabVisibility?.apis,
+        tabVisibility?.logs,
+        tabVisibility?.analytics,
+        tabVisibility?.webview,
+        tabVisibility?.redux,
+    ].filter(Boolean).length;
+    // Composite health score: success rate penalised by error volume and slow requests.
+    const healthScore = totalSignals === 0
+        ? 100
+        : Math.max(0, Math.min(100, Math.round(apiSuccessRate -
+            (logErrors > 0 ? Math.min(15, logErrors * 3) : 0) -
+            (slowCount > 0 ? Math.min(10, slowCount * 2) : 0))));
+    const healthColor = healthScore >= 90
+        ? AppColors.greenColor
+        : healthScore >= 70
+            ? AppColors.warningIconGold
+            : AppColors.errorColor;
+    const healthLabel = healthScore >= 90
+        ? 'Healthy'
+        : healthScore >= 70
+            ? 'Needs attention'
+            : 'Degraded';
+    return (<View style={styles.dashboardContainer}>
+      {/* Overview hero card */}
+      <View style={{
+            backgroundColor: AppColors.primaryLight,
+            borderRadius: 14,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            padding: 16,
+            marginBottom: 12,
+        }}>
+        <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 14,
+        }}>
+          {/* Health ring stand-in */}
+          <View style={{
+            width: 64,
+            height: 64,
+            borderRadius: 32,
+            borderWidth: 4,
+            borderColor: healthColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: AppColors.purpleShade50,
+        }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 18,
+            color: healthColor,
+        }}>
+              {healthScore}
+            </Text>
+            <Text style={{
+            fontFamily: AppFonts.interMedium,
+            fontSize: 7.5,
+            color: AppColors.grayTextWeak,
+            letterSpacing: 0.4,
+        }}>
+              HEALTH
+            </Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 15,
+            color: AppColors.primaryBlack,
+        }}>
+              Session Overview
+            </Text>
+            <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            marginTop: 3,
+        }}>
+              <View style={{
+            width: 7,
+            height: 7,
+            borderRadius: 3.5,
+            backgroundColor: healthColor,
+        }}/>
+              <Text style={{
+            fontFamily: AppFonts.interMedium,
+            fontSize: 11.5,
+            color: healthColor,
+        }}>
+                {healthLabel}
+              </Text>
+              <Text style={{
+            fontFamily: AppFonts.interRegular,
+            fontSize: 11.5,
+            color: AppColors.grayTextWeak,
+        }}>
+                • {activeModules} modules active
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Quick totals strip */}
+        <View style={{
+            flexDirection: 'row',
+            marginTop: 14,
+            borderTopWidth: 1,
+            borderTopColor: AppColors.dividerColor,
+            paddingTop: 12,
+        }}>
+          <View style={{ flex: 1, alignItems: 'center' }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 16,
+            color: AppColors.primaryBlack,
+        }}>
+              {totalSignals}
+            </Text>
+            <Text style={{
+            fontFamily: AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors.grayTextWeak,
+            marginTop: 1,
+        }}>
+              Signals
+            </Text>
+          </View>
+          <View style={{ width: 1, backgroundColor: AppColors.dividerColor }}/>
+          <View style={{ flex: 1, alignItems: 'center' }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 16,
+            color: totalIssues > 0
+                ? AppColors.errorColor
+                : AppColors.primaryBlack,
+        }}>
+              {totalIssues}
+            </Text>
+            <Text style={{
+            fontFamily: AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors.grayTextWeak,
+            marginTop: 1,
+        }}>
+              Issues
+            </Text>
+          </View>
+          <View style={{ width: 1, backgroundColor: AppColors.dividerColor }}/>
+          <View style={{ flex: 1, alignItems: 'center' }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 16,
+            color: slowCount > 0
+                ? AppColors.warningIconGold
+                : AppColors.primaryBlack,
+        }}>
+              {slowCount}
+            </Text>
+            <Text style={{
+            fontFamily: AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors.grayTextWeak,
+            marginTop: 1,
+        }}>
+              Slow ({slowRequestThreshold}ms+)
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      {/* ── Insights Sub-Tab Selector ── */}
+      {(() => {
+            const insightTabs = [
+                {
+                    key: 'apis',
+                    label: 'APIs',
+                    icon: (c, s) => <SignalIcon color={c} size={s}/>,
+                    color: AppColors.purple,
+                    count: apiTotal,
+                    visible: !!tabVisibility?.apis,
+                },
+                {
+                    key: 'logs',
+                    label: 'Logs',
+                    icon: (c, s) => <TerminalIcon color={c} size={s}/>,
+                    color: '#0D9488',
+                    count: logTotal,
+                    visible: !!tabVisibility?.logs,
+                },
+                {
+                    key: 'analytics',
+                    label: 'Analytics',
+                    icon: (c, s) => <AnalyticsIcon color={c} size={s}/>,
+                    color: '#EA580C',
+                    count: analyticsTotal,
+                    visible: !!tabVisibility?.analytics,
+                },
+                {
+                    key: 'webview',
+                    label: 'WebView',
+                    icon: (c, s) => <GlobeIcon color={c} size={s}/>,
+                    color: '#2563EB',
+                    count: webviewTotal,
+                    visible: !!tabVisibility?.webview,
+                },
+                {
+                    key: 'redux',
+                    label: 'Redux',
+                    icon: (c, s) => <TerminalIcon color={c} size={s}/>,
+                    color: AppColors.purple,
+                    count: reduxState ? Object.keys(reduxState).length : 0,
+                    visible: !!tabVisibility?.redux,
+                },
+            ];
+            const visibleTabs = insightTabs.filter(t => t.visible);
+            if (visibleTabs.length === 0)
+                return null;
+            return (<>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    paddingHorizontal: 2,
+                    paddingVertical: 2,
+                    gap: 8,
+                }} style={{
+                    marginBottom: 12,
+                    flexGrow: 0,
+                }}>
+              {visibleTabs.map(tab => {
+                    const isActive = insightsActiveSubTab === tab.key;
+                    return (<TouchableOpacity key={tab.key} onPress={() => {
+                            animateNextLayout();
+                            setInsightsActiveSubTab(tab.key);
+                        }} activeOpacity={0.7} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                            paddingHorizontal: 14,
+                            paddingVertical: 8,
+                            borderRadius: 20,
+                            backgroundColor: isActive
+                                ? tab.color
+                                : AppColors.primaryLight,
+                            borderWidth: 1,
+                            borderColor: isActive
+                                ? tab.color
+                                : AppColors.grayBorderSecondary,
+                        }}>
+                    {tab.icon(isActive ? '#FFFFFF' : tab.color, 14)}
+                    <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11.5,
+                            color: isActive ? '#FFFFFF' : AppColors.grayTextStrong,
+                        }}>
+                      {tab.label}
+                    </Text>
+                    <View style={{
+                            minWidth: 20,
+                            height: 18,
+                            borderRadius: 9,
+                            paddingHorizontal: 5,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: isActive
+                                ? 'rgba(255,255,255,0.25)'
+                                : AppColors.grayBackground,
+                        }}>
+                      <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: isActive ? '#FFFFFF' : AppColors.grayTextWeak,
+                        }}>
+                        {tab.count}
+                      </Text>
+                    </View>
+                  </TouchableOpacity>);
+                })}
+            </ScrollView>
+
+            {/* ── Active Module Card ── */}
+            {insightsActiveSubTab === 'apis' && tabVisibility?.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
+                <View style={styles.dashboardModuleHeader}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <SignalIcon color={AppColors.purple} size={18}/>
+                    <Text style={styles.dashboardModuleTitle}>APIs & Network</Text>
+                  </View>
+                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
+                </View>
+                <View style={styles.dashboardModuleGrid}>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>{apiTotal}</Text>
+                    <Text style={styles.dashboardGridLbl}>Requests</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[
+                        styles.dashboardGridVal,
+                        apiSuccessRate < 90 && { color: AppColors.warningIconGold },
+                    ]}>
+                      {apiSuccessRate}%
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Success Rate</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[
+                        styles.dashboardGridVal,
+                        apiErrors > 0 && { color: AppColors.errorColor },
+                    ]}>
+                      {apiErrors}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Errors</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>
+                      {avgTime != null ? `${avgTime}ms` : '—'}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Avg Latency</Text>
+                  </View>
+                </View>
+
+                {/* Status-class breakdown + latency range */}
+                <View style={{
+                        marginTop: 10,
+                        paddingTop: 10,
+                        borderTopWidth: 1,
+                        borderTopColor: AppColors.dividerColor,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        gap: 6,
+                    }}>
+                  {[
+                        { label: '2xx', value: status2xx, color: AppColors.greenColor },
+                        { label: '3xx', value: status3xx, color: AppColors.skyBlue },
+                        {
+                            label: '4xx',
+                            value: status4xx,
+                            color: AppColors.warningIconGold,
+                        },
+                        { label: '5xx', value: status5xx, color: AppColors.errorColor },
+                    ].map(s => (<View key={s.label} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                            backgroundColor: AppColors.grayBackground,
+                            borderRadius: 6,
+                            borderWidth: 1,
+                            borderColor: AppColors.dividerColor,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3,
+                        }}>
+                      <View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: s.color,
+                        }}/>
+                      <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: AppColors.grayTextStrong,
+                        }}>
+                        {s.label} {s.value}
+                      </Text>
+                    </View>))}
+                  {slowestTime != null && (<View style={{
+                            marginLeft: 'auto',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                        }}>
+                      <Text style={{
+                            fontFamily: AppFonts.interRegular,
+                            fontSize: 10,
+                            color: AppColors.grayTextWeak,
+                        }}>
+                        Range
+                      </Text>
+                      <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: AppColors.grayTextStrong,
+                        }}>
+                        {fastestTime}–{slowestTime}ms
+                      </Text>
+                    </View>)}
+                </View>
+              </TouchableScale>)}
+
+            {insightsActiveSubTab === 'logs' && tabVisibility?.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
+                <View style={styles.dashboardModuleHeader}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <TerminalIcon color="#0D9488" size={18}/>
+                    <Text style={styles.dashboardModuleTitle}>Console Logs</Text>
+                  </View>
+                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
+                </View>
+                <View style={styles.dashboardModuleGrid}>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>{logTotal}</Text>
+                    <Text style={styles.dashboardGridLbl}>Total Logs</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[styles.dashboardGridVal, { color: '#0D9488' }]}>
+                      {logInfos}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Info</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[
+                        styles.dashboardGridVal,
+                        logWarns > 0 && { color: AppColors.warningIconGold },
+                    ]}>
+                      {logWarns}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Warnings</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[
+                        styles.dashboardGridVal,
+                        logErrors > 0 && { color: AppColors.errorColor },
+                    ]}>
+                      {logErrors}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Errors</Text>
+                  </View>
+                </View>
+              </TouchableScale>)}
+
+            {insightsActiveSubTab === 'analytics' && tabVisibility?.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
+                <View style={styles.dashboardModuleHeader}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <AnalyticsIcon color="#EA580C" size={18}/>
+                    <Text style={styles.dashboardModuleTitle}>
+                      Analytics Events
+                    </Text>
+                  </View>
+                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
+                </View>
+                <View style={styles.dashboardModuleGrid}>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>{analyticsTotal}</Text>
+                    <Text style={styles.dashboardGridLbl}>Total Events</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[styles.dashboardGridVal, { color: '#EA580C' }]}>
+                      {uniqueEvents}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Unique Names</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>{screenViews}</Text>
+                    <Text style={styles.dashboardGridLbl}>Screen Views</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>
+                      {analyticsTotal > 0
+                        ? Math.round(analyticsTotal / Math.max(1, logs.length / 5))
+                        : 0}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Events Ratio</Text>
+                  </View>
+                </View>
+              </TouchableScale>)}
+
+            {insightsActiveSubTab === 'webview' && tabVisibility?.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
+                <View style={styles.dashboardModuleHeader}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <GlobeIcon color="#2563EB" size={18}/>
+                    <Text style={styles.dashboardModuleTitle}>
+                      WebView Captures
+                    </Text>
+                  </View>
+                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
+                </View>
+                <View style={styles.dashboardModuleGrid}>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={styles.dashboardGridVal}>{webviewTotal}</Text>
+                    <Text style={styles.dashboardGridLbl}>History Size</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text style={[styles.dashboardGridVal, { color: '#16A34A' }]}>
+                      Active
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Status</Text>
+                  </View>
+                  <View style={styles.dashboardGridItem}>
+                    <Text numberOfLines={1} style={styles.dashboardGridVal}>
+                      {webviewTotal > 0
+                        ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...`
+                        : '—'}
+                    </Text>
+                    <Text style={styles.dashboardGridLbl}>Last URL</Text>
+                  </View>
+                </View>
+              </TouchableScale>)}
+
+            {insightsActiveSubTab === 'redux' && tabVisibility?.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
+                <View style={styles.dashboardModuleHeader}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <TerminalIcon color={AppColors.purple} size={18}/>
+                    <Text style={styles.dashboardModuleTitle}>
+                      Redux Store State
+                    </Text>
+                  </View>
+                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
+                </View>
+                {reduxState ? (<View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
+                    <View style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            marginBottom: 4,
+                        }}>
+                      <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: AppColors.grayTextWeak,
+                            letterSpacing: 0.5,
+                        }}>
+                        REDUCER NAME
+                      </Text>
+                      <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: AppColors.grayTextWeak,
+                            letterSpacing: 0.5,
+                        }}>
+                        SIZE / FIELDS
+                      </Text>
+                    </View>
+                    {Object.keys(reduxState).map(key => {
+                            const val = reduxState[key];
+                            const fieldsCount = typeof val === 'object' && val !== null
+                                ? Object.keys(val).length
+                                : 0;
+                            const sizeStr = getSize(val);
+                            return (<View key={key} style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    paddingVertical: 2,
+                                }}>
+                          <Text style={{
+                                    fontFamily: AppFonts.interMedium,
+                                    fontSize: 12,
+                                    color: AppColors.grayTextStrong,
+                                }}>
+                            {key}
+                          </Text>
+                          <Text style={{
+                                    fontFamily: AppFonts.interRegular,
+                                    fontSize: 11,
+                                    color: AppColors.grayTextWeak,
+                                }}>
+                            {sizeStr} ({fieldsCount} fields)
+                          </Text>
+                        </View>);
+                        })}
+                  </View>) : (<View style={{ padding: 12, alignItems: 'center' }}>
+                    <Text style={{
+                            fontFamily: AppFonts.interRegular,
+                            fontSize: 12,
+                            color: AppColors.grayTextWeak,
+                        }}>
+                      No connected Redux store.
+                    </Text>
+                  </View>)}
+              </TouchableScale>)}
+          </>);
+        })()}
+    </View>);
+};
+export default InsightsDashboard;

package/dist/esm/components/Inspector/InspectorContext.d.ts

@@ -0,0 +1,5 @@
+import { InspectorContextValue } from '../../types';
+export { InspectorContextValue, InspectorStorage, ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, } from '../../types';
+export declare const InspectorContext: import("react").Context<InspectorContextValue>;
+export declare const useInspector: () => InspectorContextValue;
+export declare const animateNextLayout: () => void;

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+export const InspectorContext = createContext(null);
+export const useInspector = () => {
+    const ctx = useContext(InspectorContext);
+    if (!ctx) {
+        throw new Error('useInspector must be used within <InspectorContext.Provider>');
+    }
+    return ctx;
+};
+export const animateNextLayout = () => {
+    // Disabled LayoutAnimation to prevent iOS NSRangeException crashes under Fabric
+    // and Android rendering performance freezes.
+};

package/dist/esm/components/Inspector/InspectorHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InspectorHeader: () => React.JSX.Element;
+export default InspectorHeader;