react-native-inapp-inspector 1.0.15 → 1.0.17

package/dist/esm/components/ConsoleLogCard.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { StyleSheet, Text, View, Pressable, Platform } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, LayoutAnimation, Platform, Pressable, StyleSheet, Text, UIManager, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import HighlightText from './HighlightText';
@@ -70,7 +70,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')
@@ -87,7 +90,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 (<Text style={textStyle} numberOfLines={numberOfLines}>
@@ -108,6 +118,7 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
 };
 export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
     const [expanded, setExpanded] = useState(false);
+    const chevronAnim = useRef(new Animated.Value(0)).current;
     const jsonContent = getJsonContent(item.message);
     const isAnalyticsError = item.message
         .toLowerCase()
@@ -191,6 +202,26 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
         }
     };
     const colors = getLogColors();
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
+    useEffect(() => {
+        Animated.timing(chevronAnim, {
+            toValue: expanded ? 1 : 0,
+            duration: 180,
+            useNativeDriver: true,
+        }).start();
+    }, [chevronAnim, expanded]);
+    const toggleExpanded = () => {
+        LayoutAnimation.configureNext(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
@@ -211,10 +242,8 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                 paddingRight: 4,
             },
         ]}>
-        
         {/* Left Content Area */}
-        <Pressable onPress={() => setExpanded(prev => !prev)} style={{ flex: 1, paddingRight: 6 }}>
-          
+        <Pressable onPress={toggleExpanded} style={{ flex: 1, paddingRight: 6 }}>
           <View style={styles.cardHeader}>
             <View style={styles.headerLeft}>
               <CopyButton value={item.message} label="Log message"/>
@@ -232,7 +261,10 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
             },
         ]}>
                 <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'}
                 </Text>
               </View>
               {jsonContent && (<View style={[
@@ -244,7 +276,9 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                 },
             ]}>
                   <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}}`}
                   </Text>
                 </View>)}
               {isAnalyticsError && (<View style={[
@@ -263,7 +297,10 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                     borderWidth: 1,
                 },
             ]}>
-                  <Text style={[styles.badgeText, { color: AppColors.grayTextStrong }]}>
+                  <Text style={[
+                styles.badgeText,
+                { color: AppColors.grayTextStrong },
+            ]}>
                     user-log
                   </Text>
                 </View>)}
@@ -279,43 +316,92 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                     webview
                   </Text>
                 </View>)}
-              <Text style={[styles.serialNumber, { color: AppColors.grayTextWeak }]}>#{item.id + 1}</Text>
-              <Text style={[styles.timestamp, { color: AppColors.grayTextWeak }]}>{formatTime(item.timestamp)}</Text>
+              <Text style={[styles.serialNumber, { color: AppColors.grayTextWeak }]}>
+                #{item.id + 1}
+              </Text>
+              <Text style={[styles.timestamp, { color: AppColors.grayTextWeak }]}>
+                {formatTime(item.timestamp)}
+              </Text>
             </View>
-            
-            {caller && caller !== 'Unknown' && (<Text style={[styles.callerText, { color: AppColors.grayTextWeak, marginRight: 4 }]} numberOfLines={1} ellipsizeMode="middle">
+
+            {caller && caller !== 'Unknown' && (<Text style={[
+                styles.callerText,
+                { color: AppColors.grayTextWeak, marginRight: 4 },
+            ]} numberOfLines={1} ellipsizeMode="middle">
                 {caller.split('/').pop() || caller}
               </Text>)}
           </View>
 
-          <View style={[styles.cardBody, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.dividerColor }]}>
+          <View style={[
+            styles.cardBody,
+            {
+                backgroundColor: AppColors.primaryLight,
+                borderColor: AppColors.dividerColor,
+            },
+        ]}>
             {jsonContent ? (<>
-                {jsonContent.header ? (<Pressable onPress={() => setExpanded(prev => !prev)}>
+                {jsonContent.header ? (<Pressable onPress={toggleExpanded}>
                     {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, numLines)}
                   </Pressable>) : null}
-                {expanded ? (<View style={[styles.jsonContainer, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.dividerColor }]}>
+                {expanded ? (<View style={[
+                    styles.jsonContainer,
+                    {
+                        backgroundColor: AppColors.grayBackground,
+                        borderColor: AppColors.dividerColor,
+                    },
+                ]}>
                     <JsonViewer data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                  </View>) : (<Pressable onPress={() => setExpanded(prev => !prev)} style={[styles.jsonPreviewContainer, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.dividerColor }]}>
-                    <HighlightText text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[styles.jsonPreviewText, { color: AppColors.primaryBlack }]} highlightStyle={styles.highlight} detectLinks={true}/>
+                  </View>) : (<Pressable onPress={toggleExpanded} style={[
+                    styles.jsonPreviewContainer,
+                    {
+                        backgroundColor: AppColors.grayBackground,
+                        borderColor: AppColors.dividerColor,
+                    },
+                ]}>
+                    <HighlightText text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[
+                    styles.jsonPreviewText,
+                    { color: AppColors.primaryBlack },
+                ]} highlightStyle={styles.highlight} detectLinks={true}/>
                   </Pressable>)}
-              </>) : (<Pressable onPress={() => setExpanded(prev => !prev)}>
+              </>) : (<Pressable onPress={toggleExpanded}>
                 {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, numLines)}
               </Pressable>)}
-            {hasLongMessage && (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+            {hasLongMessage && (<Pressable onPress={toggleExpanded} style={styles.seeMoreBtn} hitSlop={8}>
                 <Text style={styles.seeMoreText}>
                   {expanded ? 'See Less' : 'See More'}
                 </Text>
               </Pressable>)}
           </View>
 
-          {expanded && (<View style={[styles.cardFooter, { borderTopColor: AppColors.dividerColor, gap: 6 }]}>
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10.5, color: AppColors.grayTextWeak }}>
-                  Length: {item.message.length} chars • Size: {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length} bytes
+          {expanded && (<View style={[
+                styles.cardFooter,
+                { borderTopColor: AppColors.dividerColor, gap: 6 },
+            ]}>
+              <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 10.5,
+                color: AppColors.grayTextWeak,
+            }}>
+                  Length: {item.message.length} chars • Size:{' '}
+                  {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length}{' '}
+                  bytes
                 </Text>
               </View>
-              {caller && caller !== 'Unknown' && (<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
-                  <Text style={[styles.fullCallerText, { color: AppColors.grayText, flex: 1, marginRight: 8 }]} numberOfLines={2}>
+              {caller && caller !== 'Unknown' && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginTop: 4,
+                }}>
+                  <Text style={[
+                    styles.fullCallerText,
+                    { color: AppColors.grayText, flex: 1, marginRight: 8 },
+                ]} numberOfLines={2}>
                     Caller: {caller}
                   </Text>
                   <CopyButton value={caller} label="Caller stack frame"/>
@@ -324,7 +410,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
         </Pressable>
 
         {/* Right Isolated Chevron Area */}
-        <Pressable onPress={() => setExpanded(prev => !prev)} style={{
+        <Pressable onPress={toggleExpanded} style={{
             width: 28,
             alignItems: 'center',
             justifyContent: 'center',
@@ -332,11 +418,10 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
             marginTop: expanded ? 8 : 0,
             height: expanded ? 32 : undefined,
         }} hitSlop={12}>
-          <View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+          <Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
             <ChevronIcon size={16} color={AppColors.grayTextWeak}/>
-          </View>
+          </Animated.View>
         </Pressable>
-
       </View>
     </View>);
 });

package/dist/esm/components/EmptyState.js

@@ -1,13 +1,31 @@
-import React from 'react';
-import { DevSettings, Alert, View, Text } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { Animated, DevSettings, Alert, Text } from 'react-native';
 // Components
 import TouchableScale from './TouchableScale';
+import AnimatedEntrance from './AnimatedEntrance';
 // Assets
 import { EmptyRadarIcon } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const EmptyState = ({ isSearch }) => {
+    const iconPulse = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        const loop = Animated.loop(Animated.sequence([
+            Animated.timing(iconPulse, {
+                toValue: 1.06,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+            Animated.timing(iconPulse, {
+                toValue: 1,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [iconPulse]);
     const handleReload = () => {
         if (__DEV__ && DevSettings && DevSettings.reload) {
             DevSettings.reload();
@@ -15,10 +33,10 @@ const EmptyState = ({ isSearch }) => {
         }
         Alert.alert('Reload', 'App reload is typically only available in development mode.');
     };
-    return (<View style={styles.emptyContainer}>
-      <View style={styles.emptyIconWrap}>
+    return (<AnimatedEntrance style={styles.emptyContainer} distance={14}>
+      <Animated.View style={[styles.emptyIconWrap, { transform: [{ scale: iconPulse }] }]}>
         <EmptyRadarIcon color={AppColors.purple} size={32}/>
-      </View>
+      </Animated.View>
       <Text style={styles.emptyTitle}>
         {isSearch ? 'No matching APIs' : 'No network activity'}
       </Text>
@@ -30,6 +48,6 @@ const EmptyState = ({ isSearch }) => {
       {!isSearch && (<TouchableScale style={styles.reloadBtn} onPress={handleReload}>
           <Text style={styles.reloadBtnText}>Reload App</Text>
         </TouchableScale>)}
-    </View>);
+    </AnimatedEntrance>);
 };
 export default EmptyState;

package/dist/esm/components/ReduxTreeView.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
-import { View, Text, Pressable, StyleSheet } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, LayoutAnimation, Platform, Pressable, StyleSheet, Text, UIManager, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { ChevronIcon } from './NetworkIcons';
 import Svg, { Path } from 'react-native-svg';
+import AnimatedEntrance from './AnimatedEntrance';
 // Custom icons
 const DatabaseIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -16,6 +17,26 @@ const BoltIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width=
 const FolderIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+const animateTreeLayout = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+};
+const AnimatedChevron = ({ color, expanded, size, style, }) => {
+    const progress = useRef(new Animated.Value(expanded ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(progress, {
+            toValue: expanded ? 1 : 0,
+            duration: 180,
+            useNativeDriver: true,
+        }).start();
+    }, [expanded, progress]);
+    const rotate = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '90deg'],
+    });
+    return (<Animated.View style={[style, { transform: [{ rotate }] }]}>
+      <ChevronIcon color={color} size={size}/>
+    </Animated.View>);
+};
 const ReduxValueNode = ({ name, value, level, search }) => {
     const [expanded, setExpanded] = useState(level < 1);
     const isObject = typeof value === 'object' && value !== null;
@@ -39,7 +60,11 @@ const ReduxValueNode = ({ name, value, level, search }) => {
         return null;
     }
     if (!isObject) {
-        const valStr = value === null ? 'null' : value === undefined ? 'undefined' : String(value);
+        const valStr = value === null
+            ? 'null'
+            : value === undefined
+                ? 'undefined'
+                : String(value);
         // Pick different colors for primitives
         let valColor = '#0D9488'; // String
         if (value === null || value === undefined) {
@@ -63,13 +88,16 @@ const ReduxValueNode = ({ name, value, level, search }) => {
       </View>);
     }
     const keys = Object.keys(value);
-    const summaryText = isArray ? `Array [${keys.length}]` : `Object {${keys.length}}`;
+    const summaryText = isArray
+        ? `Array [${keys.length}]`
+        : `Object {${keys.length}}`;
     return (<View style={reduxValueStyles.treeNodeBlock}>
-      <Pressable onPress={() => setExpanded(!expanded)} style={reduxValueStyles.treeRow}>
+      <Pressable onPress={() => {
+            animateTreeLayout();
+            setExpanded(!expanded);
+        }} style={reduxValueStyles.treeRow}>
         <View style={reduxValueStyles.treeLeafConnector}/>
-        <View style={[reduxValueStyles.chevronWrap, { transform: [{ rotate: expanded ? '90deg' : '0deg' }] }]}>
-          <ChevronIcon color={AppColors.grayTextWeak} size={10}/>
-        </View>
+        <AnimatedChevron color={AppColors.grayTextWeak} expanded={expanded} size={10} style={reduxValueStyles.chevronWrap}/>
         <Text style={reduxValueStyles.keyText} selectable={true}>
           {nameStr}
           <Text style={reduxValueStyles.colonText}>: </Text>
@@ -84,13 +112,24 @@ const ReduxValueNode = ({ name, value, level, search }) => {
 export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
     const [storeExpanded, setStoreExpanded] = useState(true);
     const [reducerExpanded, setReducerExpanded] = useState({});
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
     if (!state || typeof state !== 'object') {
-        return (<Text style={{ fontFamily: AppFonts.interRegular, fontSize: 12, color: AppColors.grayTextWeak, padding: 12 }}>
+        return (<Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 12,
+                color: AppColors.grayTextWeak,
+                padding: 12,
+            }}>
         No state object to display.
       </Text>);
     }
     const reducers = Object.keys(state);
     const toggleReducer = (key) => {
+        animateTreeLayout();
         setReducerExpanded(prev => ({
             ...prev,
             [key]: !prev[key],
@@ -98,10 +137,11 @@ export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
     };
     return (<View style={styles.container}>
       {/* Root Node: Store */}
-      <Pressable onPress={() => setStoreExpanded(!storeExpanded)} style={styles.storeHeader}>
-        <View style={[styles.chevronWrap, { transform: [{ rotate: storeExpanded ? '90deg' : '0deg' }] }]}>
-          <ChevronIcon color="#FFFFFF" size={12}/>
-        </View>
+      <Pressable onPress={() => {
+            animateTreeLayout();
+            setStoreExpanded(!storeExpanded);
+        }} style={styles.storeHeader}>
+        <AnimatedChevron color="#FFFFFF" expanded={storeExpanded} size={12} style={styles.chevronWrap}/>
         <Text style={styles.storeTitle}>🏪 Redux Store</Text>
         <View style={styles.badge}>
           <Text style={styles.badgeText}>{reducers.length} Reducers</Text>
@@ -116,14 +156,15 @@ export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
                 const lastAction = lastActionMap[reducerKey];
                 return (<View key={reducerKey} style={styles.reducerContainer}>
                 {/* Visual Branch Line for Reducer */}
-                <View style={[styles.reducerVerticalLine, isLastReducer && { bottom: '50%' }]}/>
+                <View style={[
+                        styles.reducerVerticalLine,
+                        isLastReducer && { bottom: '50%' },
+                    ]}/>
 
                 {/* Reducer Header */}
                 <Pressable onPress={() => toggleReducer(reducerKey)} style={styles.reducerHeader}>
                   <View style={styles.reducerHorizontalLine}/>
-                  <View style={[styles.chevronWrap, { transform: [{ rotate: isExpanded ? '90deg' : '0deg' }] }]}>
-                    <ChevronIcon color={AppColors.purple} size={10}/>
-                  </View>
+                  <AnimatedChevron color={AppColors.purple} expanded={isExpanded} size={10} style={styles.chevronWrap}/>
                   <View style={styles.iconWrap}>
                     <FolderIcon color={AppColors.purple} size={11}/>
                   </View>
@@ -141,13 +182,24 @@ export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
                         <BoltIcon color="#DB2777" size={11}/>
                       </View>
                       <View style={{ flex: 1 }}>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+                        <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            gap: 6,
+                        }}>
                           <Text style={styles.childLabel}>Last Action:</Text>
                           {lastAction ? (<View style={styles.actionTypeBadge}>
-                              <Text style={styles.actionTypeText}>{lastAction.type}</Text>
-                            </View>) : (<Text style={styles.noActionText}>None dispatched</Text>)}
+                              <Text style={styles.actionTypeText}>
+                                {lastAction.type}
+                              </Text>
+                            </View>) : (<Text style={styles.noActionText}>
+                              None dispatched
+                            </Text>)}
                         </View>
-                        {lastAction && (<Text style={styles.timestampText}>Dispatched: {lastAction.timestamp}</Text>)}
+                        {lastAction && (<Text style={styles.timestampText}>
+                            Dispatched: {lastAction.timestamp}
+                          </Text>)}
                         {lastAction && lastAction.payload !== null && (<View style={{ marginTop: 6 }}>
                             <ReduxValueNode name="payload" value={lastAction.payload} level={0} search={search}/>
                           </View>)}
@@ -176,6 +228,7 @@ export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
 export const ReduxActionTimeline = ({ history, onClear, search, }) => {
     const [expandedActionId, setExpandedActionId] = useState(null);
     const toggleExpand = (id) => {
+        animateTreeLayout();
         setExpandedActionId(prev => (prev === id ? null : id));
     };
     const filteredHistory = history.filter(action => {
@@ -193,7 +246,9 @@ export const ReduxActionTimeline = ({ history, onClear, search, }) => {
     });
     return (<View style={timelineStyles.container}>
       <View style={timelineStyles.headerRow}>
-        <Text style={timelineStyles.headerTitle}>⚡ Dispatched Actions ({filteredHistory.length})</Text>
+        <Text style={timelineStyles.headerTitle}>
+          ⚡ Dispatched Actions ({filteredHistory.length})
+        </Text>
         {history.length > 0 && (<Pressable onPress={onClear} style={timelineStyles.clearBtn}>
             <Text style={timelineStyles.clearBtnText}>Clear Log</Text>
           </Pressable>)}
@@ -209,9 +264,12 @@ export const ReduxActionTimeline = ({ history, onClear, search, }) => {
           {filteredHistory.map((item, index) => {
                 const isLast = index === filteredHistory.length - 1;
                 const isExpanded = expandedActionId === item.id;
-                return (<View key={item.id} style={timelineStyles.timelineItem}>
+                return (<AnimatedEntrance key={item.id} index={index} distance={8} style={timelineStyles.timelineItem}>
                 {/* Visual Line */}
-                <View style={[timelineStyles.verticalLine, isLast && { bottom: '50%' }]}/>
+                <View style={[
+                        timelineStyles.verticalLine,
+                        isLast && { bottom: '50%' },
+                    ]}/>
                 <View style={timelineStyles.circleIndicator}>
                   <View style={timelineStyles.circleInner}/>
                 </View>
@@ -219,13 +277,18 @@ export const ReduxActionTimeline = ({ history, onClear, search, }) => {
                 {/* Card */}
                 <Pressable onPress={() => toggleExpand(item.id)} style={[
                         timelineStyles.card,
-                        isExpanded && { borderColor: AppColors.purple, backgroundColor: AppColors.purpleShade50 },
+                        isExpanded && {
+                            borderColor: AppColors.purple,
+                            backgroundColor: AppColors.purpleShade50,
+                        },
                     ]}>
                   <View style={timelineStyles.cardHeader}>
                     <View style={timelineStyles.typeBadge}>
                       <Text style={timelineStyles.typeText}>{item.type}</Text>
                     </View>
-                    <Text style={timelineStyles.timestamp}>{item.timestamp}</Text>
+                    <Text style={timelineStyles.timestamp}>
+                      {item.timestamp}
+                    </Text>
                   </View>
 
                   {item.affectedSlices.length > 0 && (<View style={timelineStyles.slicesRow}>
@@ -237,12 +300,15 @@ export const ReduxActionTimeline = ({ history, onClear, search, }) => {
 
                   {isExpanded && (<View style={timelineStyles.payloadContainer}>
                       <Text style={timelineStyles.payloadTitle}>Payload</Text>
-                      {item.payload !== null && typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<Text style={timelineStyles.primitivePayload}>
-                          {item.payload === null ? 'null' : String(item.payload)}
+                      {item.payload !== null &&
+                            typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<Text style={timelineStyles.primitivePayload}>
+                          {item.payload === null
+                                ? 'null'
+                                : String(item.payload)}
                         </Text>)}
                     </View>)}
                 </Pressable>
-              </View>);
+              </AnimatedEntrance>);
             })}
         </View>)}
     </View>);

package/dist/esm/components/TouchableScale.js

@@ -2,6 +2,22 @@ import React, { useRef } from 'react';
 import { Animated, Pressable, StyleSheet } from 'react-native';
 const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
     const scale = useRef(new Animated.Value(1)).current;
+    const opacity = useRef(new Animated.Value(1)).current;
+    const animatePress = (pressed) => {
+        Animated.parallel([
+            Animated.spring(scale, {
+                toValue: pressed ? 0.94 : 1,
+                friction: 6,
+                tension: 120,
+                useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+                toValue: pressed ? 0.86 : 1,
+                duration: pressed ? 90 : 140,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    };
     const flattenedStyle = StyleSheet.flatten(style) || {};
     const layoutStyle = {
         flex: flattenedStyle.flex,
@@ -14,8 +30,8 @@ const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
         flexShrink: flattenedStyle.flexShrink,
         gap: flattenedStyle.gap,
     };
-    return (<Pressable disabled={disabled} style={style} onPressIn={() => Animated.spring(scale, { toValue: 0.94, useNativeDriver: true }).start()} onPressOut={() => Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start()} onPress={onPress} hitSlop={hitSlop}>
-      <Animated.View style={[{ transform: [{ scale }] }, layoutStyle]}>
+    return (<Pressable disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} hitSlop={hitSlop}>
+      <Animated.View style={[{ opacity, transform: [{ scale }] }, layoutStyle]}>
         {children}
       </Animated.View>
     </Pressable>);