react-native-inapp-inspector 1.1.17 → 1.1.18

package/dist/commonjs/components/Inspector/BundleTab.d.ts

@@ -26,6 +26,11 @@ export interface BundlePackageItem {
     color: string;
     description: string;
     logoUri?: string;
+    latestVersion?: string;
+    isDeprecated?: boolean;
+    deprecationReason?: string;
+    lastActive?: string;
+    npmUrl?: string;
 }
 export interface TreeNode {
     id: string;

package/dist/commonjs/components/Inspector/BundleTab.js

@@ -632,6 +632,7 @@ const BUNDLE_PACKAGES_DATA = [
         id: 'pkg-1',
         name: 'react-native',
         version: '0.85.3',
+        latestVersion: '0.85.3',
         sizeKb: 680,
         percentage: 38.5,
         type: 'direct',
@@ -639,11 +640,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#38BDF8',
         description: 'React Native runtime, Fabric UI engine, Native Bridge, and Turbomodules.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        lastActive: '3 days ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native',
+        isDeprecated: false,
     },
     {
         id: 'pkg-2',
         name: '@react-navigation/native-stack',
         version: '^7.16.0',
+        latestVersion: '7.16.0',
         sizeKb: 245,
         percentage: 13.9,
         type: 'direct',
@@ -651,11 +656,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#818CF8',
         description: 'Native screen router, UIViewController / Fragment animations and transitions.',
         logoUri: 'https://reactnavigation.org/img/spiro.svg',
+        lastActive: '1 week ago',
+        npmUrl: 'https://www.npmjs.com/package/@react-navigation/native-stack',
+        isDeprecated: false,
     },
     {
         id: 'pkg-3',
         name: 'react',
         version: '19.2.3',
+        latestVersion: '19.2.3',
         sizeKb: 185,
         percentage: 10.5,
         type: 'direct',
@@ -663,11 +672,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#06B6D4',
         description: 'React core virtual DOM reconciler, hooks engine, and JSX runtime.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        lastActive: '5 days ago',
+        npmUrl: 'https://www.npmjs.com/package/react',
+        isDeprecated: false,
     },
     {
         id: 'pkg-4',
         name: 'react-native-svg',
         version: '^15.15.5',
+        latestVersion: '15.16.0',
         sizeKb: 140,
         percentage: 7.9,
         type: 'direct',
@@ -675,11 +688,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#F472B6',
         description: 'Scalable Vector Graphics XML parser and native canvas path rasterizer.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/512px-SVG_logo.svg.png',
+        lastActive: '2 days ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native-svg',
+        isDeprecated: false,
     },
     {
         id: 'pkg-5',
         name: 'react-native-screens',
         version: '^4.25.2',
+        latestVersion: '4.25.2',
         sizeKb: 110,
         percentage: 6.2,
         type: 'transitive',
@@ -687,11 +704,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#A78BFA',
         description: 'Native navigation container primitives for iOS and Android memory management.',
         logoUri: 'https://reactnavigation.org/img/spiro.svg',
+        lastActive: '2 weeks ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native-screens',
+        isDeprecated: false,
     },
     {
         id: 'pkg-6',
         name: 'axios',
         version: '^1.17.0',
+        latestVersion: '1.18.0',
         sizeKb: 88,
         percentage: 5.0,
         type: 'direct',
@@ -699,11 +720,15 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#F59E0B',
         description: 'HTTP client, request/response interceptors, and adapter pipelines.',
         logoUri: 'https://axios-http.com/assets/logo.svg',
+        lastActive: '4 days ago',
+        npmUrl: 'https://www.npmjs.com/package/axios',
+        isDeprecated: false,
     },
     {
         id: 'pkg-7',
         name: 'react-native-linear-gradient',
         version: '^2.8.3',
+        latestVersion: '2.8.3',
         sizeKb: 45,
         percentage: 2.5,
         type: 'direct',
@@ -711,11 +736,16 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#FB7185',
         description: 'Hardware accelerated native gradient drawing shaders.',
         logoUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        lastActive: '2 years ago',
+        npmUrl: 'https://www.npmjs.com/package/react-native-linear-gradient',
+        isDeprecated: true,
+        deprecationReason: 'Package maintenance is in transition. Consider expo-linear-gradient or @react-native-community/linear-gradient for Fabric support.',
     },
     {
         id: 'pkg-8',
         name: 'i18next & react-i18next',
         version: '^26.3.6',
+        latestVersion: '26.3.6',
         sizeKb: 62,
         percentage: 3.5,
         type: 'direct',
@@ -723,6 +753,9 @@ const BUNDLE_PACKAGES_DATA = [
         color: '#10B981',
         description: 'Internationalization framework, language interpolator, and locale switcher.',
         logoUri: 'https://raw.githubusercontent.com/i18next/i18next/master/assets/i18next-logo.png',
+        lastActive: '6 days ago',
+        npmUrl: 'https://www.npmjs.com/package/i18next',
+        isDeprecated: false,
     },
 ];
 const CATEGORY_TABS = [
@@ -1354,65 +1387,99 @@ const BundleTab = react_1.default.memo(() => {
               Showing {filteredPackages.length} dependencies
             </react_native_1.Text>
 
-            {filteredPackages.map((pkg, index) => (<react_native_1.View key={pkg.id} style={bundleStyles.fileCard}>
-                {/* Header Row: #s.no + Logo + Package Name + Version Pill + Size & Copy */}
-                <react_native_1.View style={bundleStyles.fileCardTop}>
-                  <react_native_1.View style={bundleStyles.sNoBadge}>
-                    <react_native_1.Text style={bundleStyles.sNoText}>#{index + 1}</react_native_1.Text>
-                  </react_native_1.View>
+            {filteredPackages.map((pkg, index) => {
+                const cleanInstalledVersion = pkg.version.replace(/^\^/, '');
+                const hasUpdate = pkg.latestVersion && pkg.latestVersion !== cleanInstalledVersion;
+                return (<react_native_1.View key={pkg.id} style={[bundleStyles.fileCard, pkg.isDeprecated && { borderColor: '#FECDD3', backgroundColor: '#FFFDFD' }]}>
+                  {/* Header Row: #s.no + Logo + Package Name + Version Pill + Update/Deprecated Badges + Size & Copy */}
+                  <react_native_1.View style={bundleStyles.fileCardTop}>
+                    <react_native_1.View style={bundleStyles.sNoBadge}>
+                      <react_native_1.Text style={bundleStyles.sNoText}>#{index + 1}</react_native_1.Text>
+                    </react_native_1.View>
 
-                  <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
+                    <PackageLogoRenderer name={pkg.name} color={pkg.color} size={28}/>
 
-                  <react_native_1.View style={{ flex: 1, paddingHorizontal: 4 }}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                      <HighlightText_1.default text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
-                      <react_native_1.View style={bundleStyles.versionPill}>
-                        <react_native_1.Text style={bundleStyles.versionPillText}>
-                          v{pkg.version.replace(/^\^/, '')}
-                        </react_native_1.Text>
+                    <react_native_1.View style={{ flex: 1, paddingHorizontal: 4 }}>
+                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                        <HighlightText_1.default text={pkg.name} search={search} style={bundleStyles.fileName} highlightStyle={bundleStyles.searchHighlight}/>
+                        <react_native_1.View style={bundleStyles.versionPill}>
+                          <react_native_1.Text style={bundleStyles.versionPillText}>
+                            v{cleanInstalledVersion}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+
+                        {pkg.isDeprecated ? (<react_native_1.View style={bundleStyles.deprecatedBadge}>
+                            <react_native_1.Text style={bundleStyles.deprecatedBadgeText}>⚠️ DEPRECATED</react_native_1.Text>
+                          </react_native_1.View>) : hasUpdate ? (<react_native_1.View style={bundleStyles.updateBadge}>
+                            <react_native_1.Text style={bundleStyles.updateBadgeText}>⚡ Update: v{pkg.latestVersion}</react_native_1.Text>
+                          </react_native_1.View>) : (<react_native_1.View style={[bundleStyles.updateBadge, { backgroundColor: '#F3F4F6', borderColor: '#E5E7EB' }]}>
+                            <react_native_1.Text style={[bundleStyles.updateBadgeText, { color: '#4B5563' }]}>✨ Up to date</react_native_1.Text>
+                          </react_native_1.View>)}
                       </react_native_1.View>
                     </react_native_1.View>
-                  </react_native_1.View>
 
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                    <react_native_1.View style={bundleStyles.fileSizeBox}>
-                      <react_native_1.Text style={bundleStyles.fileSizeKb}>{pkg.sizeKb} KB</react_native_1.Text>
-                      <react_native_1.Text style={bundleStyles.filePercent}>{pkg.percentage}%</react_native_1.Text>
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <react_native_1.View style={bundleStyles.fileSizeBox}>
+                        <react_native_1.Text style={bundleStyles.fileSizeKb}>{pkg.sizeKb} KB</react_native_1.Text>
+                        <react_native_1.Text style={bundleStyles.filePercent}>{pkg.percentage}%</react_native_1.Text>
+                      </react_native_1.View>
+                      <CopyButton_1.default value={() => pkg} label="Package Details JSON"/>
                     </react_native_1.View>
-                    <CopyButton_1.default value={() => pkg} label="Package Details JSON"/>
                   </react_native_1.View>
-                </react_native_1.View>
 
-                {/* Subtitle Row: Category Chip + Description */}
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4, marginBottom: 2 }}>
-                  <react_native_1.View style={[bundleStyles.pkgBadge, { backgroundColor: `${pkg.color}1F`, borderColor: `${pkg.color}4D` }]}>
-                    <react_native_1.Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
-                      {pkg.category.toUpperCase()}
+                  {/* Subtitle Row: Category Chip + Description */}
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4, marginBottom: 2 }}>
+                    <react_native_1.View style={[bundleStyles.pkgBadge, { backgroundColor: `${pkg.color}1F`, borderColor: `${pkg.color}4D` }]}>
+                      <react_native_1.Text style={[bundleStyles.pkgBadgeText, { color: pkg.color }]}>
+                        {pkg.category.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={[bundleStyles.filePath, { flex: 1, marginTop: 0 }]} numberOfLines={1}>
+                      {pkg.description}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.Text style={[bundleStyles.filePath, { flex: 1, marginTop: 0 }]} numberOfLines={1}>
-                    {pkg.description}
-                  </react_native_1.Text>
-                </react_native_1.View>
 
-                <react_native_1.View style={bundleStyles.fileProgressTrack}>
-                  <react_native_1.View style={[
-                    bundleStyles.fileProgressBar,
-                    { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.color },
-                ]}/>
-                </react_native_1.View>
+                  {/* Deprecation Warning Banner if deprecated */}
+                  {pkg.isDeprecated && pkg.deprecationReason && (<react_native_1.View style={bundleStyles.deprecationBox}>
+                      <react_native_1.Text style={bundleStyles.deprecationText}>
+                        ⚠️ {pkg.deprecationReason}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
 
-                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 2 }}>
-                  <react_native_1.View style={bundleStyles.typeTag}>
-                    <react_native_1.Text style={bundleStyles.typeTagText}>
-                      {pkg.type === 'direct' ? '📦 Direct Dependency' : '🔗 Transitive Peer'}
-                    </react_native_1.Text>
+                  <react_native_1.View style={bundleStyles.fileProgressTrack}>
+                    <react_native_1.View style={[
+                        bundleStyles.fileProgressBar,
+                        { width: `${pkg.percentage * 2}%`, backgroundColor: pkg.isDeprecated ? '#EF4444' : pkg.color },
+                    ]}/>
                   </react_native_1.View>
-                  <react_native_1.Text style={bundleStyles.fileMetaText}>
-                    ~{pkg.sizeKb} KB minified
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>))}
+
+                  {/* Footer Row: Type Tag + Last Active + NPM Link Button */}
+                  <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 3 }}>
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <react_native_1.View style={bundleStyles.typeTag}>
+                        <react_native_1.Text style={bundleStyles.typeTagText}>
+                          {pkg.type === 'direct' ? '📦 Direct' : '🔗 Transitive'}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      {pkg.lastActive && (<react_native_1.Text style={bundleStyles.lastActiveText}>
+                          🕒 {pkg.lastActive}
+                        </react_native_1.Text>)}
+                    </react_native_1.View>
+
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <react_native_1.Text style={bundleStyles.fileMetaText}>
+                        ~{pkg.sizeKb} KB minified
+                      </react_native_1.Text>
+                      <TouchableScale_1.default onPress={() => {
+                        const url = pkg.npmUrl || `https://www.npmjs.com/package/${pkg.name}`;
+                        react_native_1.Linking.openURL(url).catch(() => { });
+                    }} style={bundleStyles.npmLinkBtn}>
+                        <react_native_1.Text style={bundleStyles.npmLinkText}>npm ↗</react_native_1.Text>
+                      </TouchableScale_1.default>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </react_native_1.View>);
+            })}
           </react_native_1.ScrollView>
 
           {/* Sticky Total Package Size Footer */}
@@ -2138,6 +2205,69 @@ const bundleStyles = react_native_1.StyleSheet.create({
         fontSize: 9.5,
         color: AppColors_1.AppColors.grayText,
     },
+    npmLinkBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderRadius: 5,
+        backgroundColor: '#CB383714',
+        borderWidth: 1,
+        borderColor: '#CB383733',
+    },
+    npmLinkText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#CB3837',
+    },
+    deprecatedBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        backgroundColor: '#FEE2E2',
+        borderWidth: 1,
+        borderColor: '#FECACA',
+    },
+    deprecatedBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: '#DC2626',
+        letterSpacing: 0.3,
+    },
+    updateBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 4,
+        backgroundColor: '#DCFCE7',
+        borderWidth: 1,
+        borderColor: '#BBF7D0',
+    },
+    updateBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: '#047857',
+    },
+    lastActiveText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    deprecationBox: {
+        backgroundColor: '#FFF1F2',
+        borderRadius: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        borderWidth: 1,
+        borderColor: '#FECDD3',
+        marginTop: 3,
+    },
+    deprecationText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: '#BE123C',
+        lineHeight: 14,
+    },
     unusedBadge: {
         paddingHorizontal: 6,
         paddingVertical: 1.5,

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -52,6 +52,7 @@ const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
 const ReduxTab_1 = __importDefault(require("./ReduxTab"));
 const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
 const BundleTab_1 = __importDefault(require("./BundleTab"));
+const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
@@ -121,6 +122,12 @@ const MainScreen = () => {
                 }}>
                       {mountedTabs.bundle && <BundleTab_1.default />}
                     </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'performance' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.performance && <PerformanceTab_1.default />}
+                    </react_native_1.View>
                   </>)) : (<react_native_1.View style={styles_1.default.empty}>
                   <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
                   <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>

package/dist/commonjs/components/Inspector/PerformanceTab.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface PerformanceEvent {
+    id: string;
+    timestamp: number;
+    type: 'fps_drop' | 'slow_render' | 'transition' | 'memory' | 'network' | 'bridge' | 'touch';
+    category: 'render' | 'navigation' | 'memory' | 'io' | 'bridge';
+    fps: number;
+    durationMs: number;
+    label: string;
+    detail: string;
+    source?: string;
+    breakdown?: {
+        jsTimeMs: number;
+        uiTimeMs: number;
+        bridgeLatencyMs?: number;
+    };
+    heapDeltaKb?: number;
+    advice?: string;
+    severity: 'optimal' | 'warning' | 'critical';
+}
+declare const PerformanceTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default PerformanceTab;