react-native-inapp-inspector 1.0.15 → 1.0.17

package/dist/commonjs/components/AnimatedEntrance.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface AnimatedEntranceProps {
+    children: React.ReactNode;
+    delay?: number;
+    distance?: number;
+    duration?: number;
+    index?: number;
+    style?: ViewStyle | ViewStyle[];
+}
+declare const AnimatedEntrance: ({ children, delay, distance, duration, index, style, }: AnimatedEntranceProps) => React.JSX.Element;
+export default AnimatedEntrance;

package/dist/commonjs/components/AnimatedEntrance.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+    const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        progress.setValue(0);
+        react_native_1.Animated.timing(progress, {
+            toValue: 1,
+            duration,
+            delay: delay + Math.min(index, 12) * 18,
+            useNativeDriver: true,
+        }).start();
+    }, [delay, duration, index, progress]);
+    return (<react_native_1.Animated.View style={[
+            style,
+            {
+                opacity: progress,
+                transform: [
+                    {
+                        translateY: progress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [distance, 0],
+                        }),
+                    },
+                    {
+                        scale: progress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0.985, 1],
+                        }),
+                    },
+                ],
+            },
+        ]}>
+      {children}
+    </react_native_1.Animated.View>);
+};
+exports.default = AnimatedEntrance;

package/dist/commonjs/components/ConsoleLogCard.js

@@ -109,7 +109,10 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const remainingText = message.substring(fullPrefix.length);
         const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
         const getTagColor = (tag) => {
-            const cleanTag = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            const cleanTag = tag
+                .replace(/[\[\]]/g, '')
+                .trim()
+                .toUpperCase();
             if (cleanTag === 'API')
                 return '#0284C7';
             if (cleanTag === 'TEST')
@@ -126,7 +129,14 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
             for (let i = 0; i < cleanTag.length; i++) {
                 hash = cleanTag.charCodeAt(i) + ((hash << 5) - hash);
             }
-            const colors = ['#0891B2', '#0D9488', '#2563EB', '#D97706', '#E11D48', '#8B5CF6'];
+            const colors = [
+                '#0891B2',
+                '#0D9488',
+                '#2563EB',
+                '#D97706',
+                '#E11D48',
+                '#8B5CF6',
+            ];
             return colors[Math.abs(hash) % colors.length];
         };
         return (<react_native_1.Text style={textStyle} numberOfLines={numberOfLines}>
@@ -147,6 +157,7 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
 };
 exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
     const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const jsonContent = getJsonContent(item.message);
     const isAnalyticsError = item.message
         .toLowerCase()
@@ -230,6 +241,26 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         }
     };
     const colors = getLogColors();
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'android') {
+            react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(chevronAnim, {
+            toValue: expanded ? 1 : 0,
+            duration: 180,
+            useNativeDriver: true,
+        }).start();
+    }, [chevronAnim, expanded]);
+    const toggleExpanded = () => {
+        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        setExpanded(prev => !prev);
+    };
+    const chevronRotate = chevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg'],
+    });
     // Show limited lines unless expanded
     const numLines = expanded ? undefined : 5;
     const hasLongMessage = jsonContent
@@ -250,10 +281,8 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 paddingRight: 4,
             },
         ]}>
-        
         {/* Left Content Area */}
-        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{ flex: 1, paddingRight: 6 }}>
-          
+        <react_native_1.Pressable onPress={toggleExpanded} style={{ flex: 1, paddingRight: 6 }}>
           <react_native_1.View style={styles.cardHeader}>
             <react_native_1.View style={styles.headerLeft}>
               <CopyButton_1.default value={item.message} label="Log message"/>
@@ -271,7 +300,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             },
         ]}>
                 <react_native_1.Text style={[styles.badgeText, { color: '#6B4EFF' }]}>
-                  console.{('sourceMethod' in item ? item.sourceMethod : undefined) || item.type || 'log'}
+                  console.
+                  {('sourceMethod' in item ? item.sourceMethod : undefined) ||
+            item.type ||
+            'log'}
                 </react_native_1.Text>
               </react_native_1.View>
               {jsonContent && (<react_native_1.View style={[
@@ -283,7 +315,9 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 },
             ]}>
                   <react_native_1.Text style={[styles.badgeText, { color: '#0D9488' }]}>
-                    {Array.isArray(jsonContent.data) ? `Array[${jsonContent.data.length}]` : `Object{${Object.keys(jsonContent.data).length}}`}
+                    {Array.isArray(jsonContent.data)
+                ? `Array[${jsonContent.data.length}]`
+                : `Object{${Object.keys(jsonContent.data).length}}`}
                   </react_native_1.Text>
                 </react_native_1.View>)}
               {isAnalyticsError && (<react_native_1.View style={[
@@ -302,7 +336,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     borderWidth: 1,
                 },
             ]}>
-                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayTextStrong }]}>
+                  <react_native_1.Text style={[
+                styles.badgeText,
+                { color: AppColors_1.AppColors.grayTextStrong },
+            ]}>
                     user-log
                   </react_native_1.Text>
                 </react_native_1.View>)}
@@ -318,43 +355,92 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     webview
                   </react_native_1.Text>
                 </react_native_1.View>)}
-              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>#{item.id + 1}</react_native_1.Text>
-              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>{formatTime(item.timestamp)}</react_native_1.Text>
+              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>
+                #{item.id + 1}
+              </react_native_1.Text>
+              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
+                {formatTime(item.timestamp)}
+              </react_native_1.Text>
             </react_native_1.View>
-            
-            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[styles.callerText, { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 }]} numberOfLines={1} ellipsizeMode="middle">
+
+            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[
+                styles.callerText,
+                { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 },
+            ]} numberOfLines={1} ellipsizeMode="middle">
                 {caller.split('/').pop() || caller}
               </react_native_1.Text>)}
           </react_native_1.View>
 
-          <react_native_1.View style={[styles.cardBody, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.dividerColor }]}>
+          <react_native_1.View style={[
+            styles.cardBody,
+            {
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            },
+        ]}>
             {jsonContent ? (<>
-                {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+                {jsonContent.header ? (<react_native_1.Pressable onPress={toggleExpanded}>
                     {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
                   </react_native_1.Pressable>) : null}
-                {expanded ? (<react_native_1.View style={[styles.jsonContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
+                {expanded ? (<react_native_1.View style={[
+                    styles.jsonContainer,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                    },
+                ]}>
                     <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                  </react_native_1.View>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={[styles.jsonPreviewContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
-                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[styles.jsonPreviewText, { color: AppColors_1.AppColors.primaryBlack }]} highlightStyle={styles.highlight} detectLinks={true}/>
+                  </react_native_1.View>) : (<react_native_1.Pressable onPress={toggleExpanded} style={[
+                    styles.jsonPreviewContainer,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                    },
+                ]}>
+                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[
+                    styles.jsonPreviewText,
+                    { color: AppColors_1.AppColors.primaryBlack },
+                ]} highlightStyle={styles.highlight} detectLinks={true}/>
                   </react_native_1.Pressable>)}
-              </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+              </>) : (<react_native_1.Pressable onPress={toggleExpanded}>
                 {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
               </react_native_1.Pressable>)}
-            {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+            {hasLongMessage && (<react_native_1.Pressable onPress={toggleExpanded} style={styles.seeMoreBtn} hitSlop={8}>
                 <react_native_1.Text style={styles.seeMoreText}>
                   {expanded ? 'See Less' : 'See More'}
                 </react_native_1.Text>
               </react_native_1.Pressable>)}
           </react_native_1.View>
 
-          {expanded && (<react_native_1.View style={[styles.cardFooter, { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 }]}>
-              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10.5, color: AppColors_1.AppColors.grayTextWeak }}>
-                  Length: {item.message.length} chars • Size: {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length} bytes
+          {expanded && (<react_native_1.View style={[
+                styles.cardFooter,
+                { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 },
+            ]}>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.grayTextWeak,
+            }}>
+                  Length: {item.message.length} chars • Size:{' '}
+                  {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length}{' '}
+                  bytes
                 </react_native_1.Text>
               </react_native_1.View>
-              {caller && caller !== 'Unknown' && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
-                  <react_native_1.Text style={[styles.fullCallerText, { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 }]} numberOfLines={2}>
+              {caller && caller !== 'Unknown' && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginTop: 4,
+                }}>
+                  <react_native_1.Text style={[
+                    styles.fullCallerText,
+                    { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 },
+                ]} numberOfLines={2}>
                     Caller: {caller}
                   </react_native_1.Text>
                   <CopyButton_1.default value={caller} label="Caller stack frame"/>
@@ -363,7 +449,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         </react_native_1.Pressable>
 
         {/* Right Isolated Chevron Area */}
-        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{
+        <react_native_1.Pressable onPress={toggleExpanded} style={{
             width: 28,
             alignItems: 'center',
             justifyContent: 'center',
@@ -371,11 +457,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             marginTop: expanded ? 8 : 0,
             height: expanded ? 32 : undefined,
         }} hitSlop={12}>
-          <react_native_1.View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+          <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
             <NetworkIcons_1.ChevronIcon size={16} color={AppColors_1.AppColors.grayTextWeak}/>
-          </react_native_1.View>
+          </react_native_1.Animated.View>
         </react_native_1.Pressable>
-
       </react_native_1.View>
     </react_native_1.View>);
 });

package/dist/commonjs/components/EmptyState.js

@@ -1,18 +1,69 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // Components
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
 // Assets
 const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
 const EmptyState = ({ isSearch }) => {
+    const iconPulse = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(iconPulse, {
+                toValue: 1.06,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(iconPulse, {
+                toValue: 1,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [iconPulse]);
     const handleReload = () => {
         if (__DEV__ && react_native_1.DevSettings && react_native_1.DevSettings.reload) {
             react_native_1.DevSettings.reload();
@@ -20,10 +71,10 @@ const EmptyState = ({ isSearch }) => {
         }
         react_native_1.Alert.alert('Reload', 'App reload is typically only available in development mode.');
     };
-    return (<react_native_1.View style={styles_1.default.emptyContainer}>
-      <react_native_1.View style={styles_1.default.emptyIconWrap}>
+    return (<AnimatedEntrance_1.default style={styles_1.default.emptyContainer} distance={14}>
+      <react_native_1.Animated.View style={[styles_1.default.emptyIconWrap, { transform: [{ scale: iconPulse }] }]}>
         <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
-      </react_native_1.View>
+      </react_native_1.Animated.View>
       <react_native_1.Text style={styles_1.default.emptyTitle}>
         {isSearch ? 'No matching APIs' : 'No network activity'}
       </react_native_1.Text>
@@ -35,6 +86,6 @@ const EmptyState = ({ isSearch }) => {
       {!isSearch && (<TouchableScale_1.default style={styles_1.default.reloadBtn} onPress={handleReload}>
           <react_native_1.Text style={styles_1.default.reloadBtnText}>Reload App</react_native_1.Text>
         </TouchableScale_1.default>)}
-    </react_native_1.View>);
+    </AnimatedEntrance_1.default>);
 };
 exports.default = EmptyState;