react-native-inapp-inspector 1.0.10 → 1.0.12

package/README.md

@@ -21,6 +21,14 @@ A premium, self-contained, and interactive in-app debugger for React Native appl
 
 ---
 
+## Video Walkthrough
+
+Watch the library in action, demonstrating network inspection, Redux state tree analysis, WebView debugging, and console logging:
+
+[🎬 Download or watch the Video Walkthrough](https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/example/guidance/Video-WalkThrough.mp4)
+
+---
+
 ## Installation
 
 Install the package as a development dependency in your React Native project:

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

@@ -4,3 +4,14 @@ export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
     lastActionMap: Record<string, any>;
     search?: string;
 }) => React.JSX.Element;
+export declare const ReduxActionTimeline: ({ history, onClear, search, }: {
+    history: Array<{
+        id: number;
+        type: string;
+        payload: any;
+        timestamp: string;
+        affectedSlices: string[];
+    }>;
+    onClear: () => void;
+    search?: string;
+}) => React.JSX.Element;

package/dist/commonjs/components/ReduxTreeView.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReduxTreeView = void 0;
+exports.ReduxActionTimeline = exports.ReduxTreeView = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
@@ -210,6 +210,81 @@ const ReduxTreeView = ({ state, lastActionMap, search, }) => {
     </react_native_1.View>);
 };
 exports.ReduxTreeView = ReduxTreeView;
+const ReduxActionTimeline = ({ history, onClear, search, }) => {
+    const [expandedActionId, setExpandedActionId] = (0, react_1.useState)(null);
+    const toggleExpand = (id) => {
+        setExpandedActionId(prev => (prev === id ? null : id));
+    };
+    const filteredHistory = history.filter(action => {
+        if (!search)
+            return true;
+        const s = search.toLowerCase();
+        if (action.type.toLowerCase().includes(s))
+            return true;
+        if (action.affectedSlices.some(slice => slice.toLowerCase().includes(s)))
+            return true;
+        if (action.payload && typeof action.payload === 'object') {
+            return JSON.stringify(action.payload).toLowerCase().includes(s);
+        }
+        return false;
+    });
+    return (<react_native_1.View style={timelineStyles.container}>
+      <react_native_1.View style={timelineStyles.headerRow}>
+        <react_native_1.Text style={timelineStyles.headerTitle}>⚡ Dispatched Actions ({filteredHistory.length})</react_native_1.Text>
+        {history.length > 0 && (<react_native_1.Pressable onPress={onClear} style={timelineStyles.clearBtn}>
+            <react_native_1.Text style={timelineStyles.clearBtnText}>Clear Log</react_native_1.Text>
+          </react_native_1.Pressable>)}
+      </react_native_1.View>
+
+      {filteredHistory.length === 0 ? (<react_native_1.View style={timelineStyles.emptyContainer}>
+          <react_native_1.Text style={timelineStyles.emptyText}>
+            {history.length === 0
+                ? 'No actions dispatched yet.\nDispatch actions in your application to see the timeline.'
+                : 'No matching actions found.'}
+          </react_native_1.Text>
+        </react_native_1.View>) : (<react_native_1.View style={timelineStyles.listContainer}>
+          {filteredHistory.map((item, index) => {
+                const isLast = index === filteredHistory.length - 1;
+                const isExpanded = expandedActionId === item.id;
+                return (<react_native_1.View key={item.id} style={timelineStyles.timelineItem}>
+                {/* Visual Line */}
+                <react_native_1.View style={[timelineStyles.verticalLine, isLast && { bottom: '50%' }]}/>
+                <react_native_1.View style={timelineStyles.circleIndicator}>
+                  <react_native_1.View style={timelineStyles.circleInner}/>
+                </react_native_1.View>
+
+                {/* Card */}
+                <react_native_1.Pressable onPress={() => toggleExpand(item.id)} style={[
+                        timelineStyles.card,
+                        isExpanded && { borderColor: AppColors_1.AppColors.purple, backgroundColor: AppColors_1.AppColors.purpleShade50 },
+                    ]}>
+                  <react_native_1.View style={timelineStyles.cardHeader}>
+                    <react_native_1.View style={timelineStyles.typeBadge}>
+                      <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={timelineStyles.timestamp}>{item.timestamp}</react_native_1.Text>
+                  </react_native_1.View>
+
+                  {item.affectedSlices.length > 0 && (<react_native_1.View style={timelineStyles.slicesRow}>
+                      <react_native_1.Text style={timelineStyles.slicesLabel}>Affected:</react_native_1.Text>
+                      {item.affectedSlices.map(slice => (<react_native_1.View key={slice} style={timelineStyles.slicePill}>
+                          <react_native_1.Text style={timelineStyles.sliceText}>{slice}</react_native_1.Text>
+                        </react_native_1.View>))}
+                    </react_native_1.View>)}
+
+                  {isExpanded && (<react_native_1.View style={timelineStyles.payloadContainer}>
+                      <react_native_1.Text style={timelineStyles.payloadTitle}>Payload</react_native_1.Text>
+                      {item.payload !== null && typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<react_native_1.Text style={timelineStyles.primitivePayload}>
+                          {item.payload === null ? 'null' : String(item.payload)}
+                        </react_native_1.Text>)}
+                    </react_native_1.View>)}
+                </react_native_1.Pressable>
+              </react_native_1.View>);
+            })}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.ReduxActionTimeline = ReduxActionTimeline;
 const reduxValueStyles = react_native_1.StyleSheet.create({
     treeNodeBlock: {
         marginTop: 4,
@@ -261,6 +336,158 @@ const reduxValueStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
 });
+const timelineStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    headerTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    clearBtn: {
+        backgroundColor: 'rgba(239, 68, 68, 0.08)',
+        borderColor: 'rgba(239, 68, 68, 0.2)',
+        borderWidth: 1,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    clearBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: '#EF4444',
+    },
+    emptyContainer: {
+        paddingVertical: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textAlign: 'center',
+        lineHeight: 18,
+    },
+    listContainer: {
+        paddingLeft: 12,
+    },
+    timelineItem: {
+        position: 'relative',
+        paddingLeft: 20,
+        marginBottom: 12,
+    },
+    verticalLine: {
+        position: 'absolute',
+        left: 4,
+        top: 0,
+        bottom: -12,
+        width: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    circleIndicator: {
+        position: 'absolute',
+        left: 0,
+        top: 10,
+        width: 9,
+        height: 9,
+        borderRadius: 4.5,
+        backgroundColor: AppColors_1.AppColors.purpleShade50,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circleInner: {
+        width: 3,
+        height: 3,
+        borderRadius: 1.5,
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    card: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderRadius: 8,
+        padding: 10,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+    },
+    typeBadge: {
+        backgroundColor: 'rgba(104,75,155,0.08)',
+        borderColor: 'rgba(104,75,155,0.18)',
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        flexShrink: 1,
+    },
+    typeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    timestamp: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    slicesRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 6,
+    },
+    slicesLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        marginRight: 2,
+    },
+    slicePill: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        borderWidth: 1,
+        borderRadius: 4,
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+    },
+    sliceText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 9,
+        color: AppColors_1.AppColors.grayText,
+    },
+    payloadContainer: {
+        marginTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+        paddingTop: 8,
+    },
+    payloadTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textTransform: 'uppercase',
+        marginBottom: 4,
+    },
+    primitivePayload: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+});
 const styles = react_native_1.StyleSheet.create({
     container: {
         flex: 1,

package/dist/commonjs/customHooks/reduxLogger.d.ts

@@ -3,6 +3,14 @@ export declare const setReduxAutoRefresh: (val: boolean) => void;
 export declare const getReduxAutoRefresh: () => boolean;
 export declare const getLastActionForReducer: () => Record<string, any>;
 export declare const clearLastActionForReducer: () => void;
+export declare const getActionHistory: () => {
+    id: number;
+    type: string;
+    payload: any;
+    timestamp: string;
+    affectedSlices: string[];
+}[];
+export declare const clearActionHistory: () => void;
 export declare const setReduxState: (state: any) => void;
 export declare const subscribeReduxState: (cb: () => void) => () => void;
 export declare const connectReduxStore: (store: any) => void;

package/dist/commonjs/customHooks/reduxLogger.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connectReduxStore = exports.subscribeReduxState = exports.setReduxState = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = void 0;
+exports.connectReduxStore = exports.subscribeReduxState = exports.setReduxState = exports.clearActionHistory = exports.getActionHistory = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = void 0;
 let currentReduxState = null;
 const listeners = new Set();
 let globalReduxAutoRefresh = true;
 let lastActionForReducer = {};
+let actionHistory = [];
 const getReduxState = () => currentReduxState;
 exports.getReduxState = getReduxState;
 const setReduxAutoRefresh = (val) => {
@@ -20,6 +21,13 @@ const clearLastActionForReducer = () => {
     listeners.forEach(cb => cb());
 };
 exports.clearLastActionForReducer = clearLastActionForReducer;
+const getActionHistory = () => actionHistory;
+exports.getActionHistory = getActionHistory;
+const clearActionHistory = () => {
+    actionHistory = [];
+    listeners.forEach(cb => cb());
+};
+exports.clearActionHistory = clearActionHistory;
 const setReduxState = (state) => {
     currentReduxState = state;
     listeners.forEach(cb => cb());
@@ -44,6 +52,7 @@ const connectReduxStore = (store) => {
         const result = originalDispatch(action);
         const nextState = store.getState();
         // Map the dispatched action to state slices that actually changed
+        const affectedSlices = [];
         if (prevState &&
             nextState &&
             typeof prevState === 'object' &&
@@ -52,13 +61,27 @@ const connectReduxStore = (store) => {
             typeof action === 'object') {
             Object.keys(nextState).forEach(key => {
                 if (prevState[key] !== nextState[key]) {
-                    lastActionForReducer[key] = {
+                    const actionObj = {
                         type: action.type || 'UNKNOWN_ACTION',
                         payload: action.payload !== undefined ? action.payload : null,
                         timestamp: new Date().toLocaleTimeString(),
                     };
+                    lastActionForReducer[key] = actionObj;
+                    affectedSlices.push(key);
                 }
             });
+            // Push to history
+            actionHistory.unshift({
+                id: Date.now() + Math.random(),
+                type: action.type || 'UNKNOWN_ACTION',
+                payload: action.payload !== undefined ? action.payload : null,
+                timestamp: new Date().toLocaleTimeString(),
+                affectedSlices,
+            });
+            // Cap size at 50
+            if (actionHistory.length > 50) {
+                actionHistory.pop();
+            }
         }
         if (globalReduxAutoRefresh) {
             (0, exports.setReduxState)(nextState);

package/dist/commonjs/index.js

@@ -158,6 +158,7 @@ const NetworkInspector = ({ enabled = true }) => {
     const [search, setSearch] = (0, react_1.useState)('');
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
     const [reduxSearch, setReduxSearch] = (0, react_1.useState)('');
+    const [reduxActiveSubTab, setReduxActiveSubTab] = (0, react_1.useState)('timeline');
     const [apiDetailActiveTab, setApiDetailActiveTab] = (0, react_1.useState)('response');
     (0, react_1.useEffect)(() => {
         if (enabled && visible) {
@@ -998,7 +999,7 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: 'rgba(255, 255, 255, 0.1)'
                 }}>
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: '#FFFFFF' }}>v1.0.10</react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: '#FFFFFF' }}>v1.0.12</react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
           </react_native_linear_gradient_1.default>
@@ -1732,6 +1733,7 @@ const NetworkInspector = ({ enabled = true }) => {
         }
         // Build hierarchical tree: Store -> Reducers -> Action -> Data
         const lastActionMap = (0, reduxLogger_1.getLastActionForReducer)();
+        const actionHistory = (0, reduxLogger_1.getActionHistory)();
         return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
         {/* Top Summary Card */}
         <react_native_1.View style={{
@@ -1768,6 +1770,51 @@ const NetworkInspector = ({ enabled = true }) => {
           <CopyButton_1.default value={() => reduxState} label="Overall Store"/>
         </react_native_1.View>
 
+        {/* Tab View Selection Segments */}
+        <react_native_1.View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 10,
+                padding: 3,
+                marginHorizontal: 16,
+                marginBottom: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
+          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+                flex: 1,
+                paddingVertical: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: reduxActiveSubTab === 'timeline' ? AppColors_1.AppColors.purple : 'transparent',
+            }}>
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: reduxActiveSubTab === 'timeline' ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+            }}>
+              ⚡ Action Timeline
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('tree')} style={{
+                flex: 1,
+                paddingVertical: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: reduxActiveSubTab === 'tree' ? AppColors_1.AppColors.purple : 'transparent',
+            }}>
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: reduxActiveSubTab === 'tree' ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+            }}>
+              🏪 Store Tree
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
         {/* Search Bar */}
         <react_native_1.View style={{
                 flexDirection: 'row',
@@ -1781,7 +1828,7 @@ const NetworkInspector = ({ enabled = true }) => {
                 borderColor: AppColors_1.AppColors.dividerColor,
                 height: 36,
             }}>
-          <react_native_1.TextInput placeholder="Search Redux keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+          <react_native_1.TextInput placeholder={reduxActiveSubTab === 'timeline' ? "Search actions or payloads..." : "Search Redux keys or values..."} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
                 flex: 1,
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 12,
@@ -1793,7 +1840,7 @@ const NetworkInspector = ({ enabled = true }) => {
             </react_native_1.Pressable>)}
         </react_native_1.View>
 
-        {/* Main Tree Card */}
+        {/* Main Content Card */}
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 12,
@@ -1802,7 +1849,7 @@ const NetworkInspector = ({ enabled = true }) => {
                 marginHorizontal: 16,
                 padding: 12,
             }}>
-          <ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
+          {reduxActiveSubTab === 'timeline' ? (<ReduxTreeView_1.ReduxActionTimeline history={actionHistory} onClear={reduxLogger_1.clearActionHistory} search={reduxSearch}/>) : (<ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>)}
         </react_native_1.View>
       </react_native_1.ScrollView>);
     };
@@ -1877,7 +1924,7 @@ const NetworkInspector = ({ enabled = true }) => {
                           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                             <react_native_1.Animated.View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#4ADE80', opacity: activePulseAnim }}/>
                             <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 10, color: 'rgba(255,255,255,0.78)', letterSpacing: 0.3 }}>
-                              Active • {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.10)
+                              Active • {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.12)
                             </react_native_1.Text>
                           </react_native_1.View>
                         </react_native_1.View>

package/dist/esm/components/ReduxTreeView.d.ts

@@ -4,3 +4,14 @@ export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
     lastActionMap: Record<string, any>;
     search?: string;
 }) => React.JSX.Element;
+export declare const ReduxActionTimeline: ({ history, onClear, search, }: {
+    history: Array<{
+        id: number;
+        type: string;
+        payload: any;
+        timestamp: string;
+        affectedSlices: string[];
+    }>;
+    onClear: () => void;
+    search?: string;
+}) => React.JSX.Element;

package/dist/esm/components/ReduxTreeView.js

@@ -173,6 +173,80 @@ export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
         </View>)}
     </View>);
 };
+export const ReduxActionTimeline = ({ history, onClear, search, }) => {
+    const [expandedActionId, setExpandedActionId] = useState(null);
+    const toggleExpand = (id) => {
+        setExpandedActionId(prev => (prev === id ? null : id));
+    };
+    const filteredHistory = history.filter(action => {
+        if (!search)
+            return true;
+        const s = search.toLowerCase();
+        if (action.type.toLowerCase().includes(s))
+            return true;
+        if (action.affectedSlices.some(slice => slice.toLowerCase().includes(s)))
+            return true;
+        if (action.payload && typeof action.payload === 'object') {
+            return JSON.stringify(action.payload).toLowerCase().includes(s);
+        }
+        return false;
+    });
+    return (<View style={timelineStyles.container}>
+      <View style={timelineStyles.headerRow}>
+        <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>)}
+      </View>
+
+      {filteredHistory.length === 0 ? (<View style={timelineStyles.emptyContainer}>
+          <Text style={timelineStyles.emptyText}>
+            {history.length === 0
+                ? 'No actions dispatched yet.\nDispatch actions in your application to see the timeline.'
+                : 'No matching actions found.'}
+          </Text>
+        </View>) : (<View style={timelineStyles.listContainer}>
+          {filteredHistory.map((item, index) => {
+                const isLast = index === filteredHistory.length - 1;
+                const isExpanded = expandedActionId === item.id;
+                return (<View key={item.id} style={timelineStyles.timelineItem}>
+                {/* Visual Line */}
+                <View style={[timelineStyles.verticalLine, isLast && { bottom: '50%' }]}/>
+                <View style={timelineStyles.circleIndicator}>
+                  <View style={timelineStyles.circleInner}/>
+                </View>
+
+                {/* Card */}
+                <Pressable onPress={() => toggleExpand(item.id)} style={[
+                        timelineStyles.card,
+                        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>
+                  </View>
+
+                  {item.affectedSlices.length > 0 && (<View style={timelineStyles.slicesRow}>
+                      <Text style={timelineStyles.slicesLabel}>Affected:</Text>
+                      {item.affectedSlices.map(slice => (<View key={slice} style={timelineStyles.slicePill}>
+                          <Text style={timelineStyles.sliceText}>{slice}</Text>
+                        </View>))}
+                    </View>)}
+
+                  {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)}
+                        </Text>)}
+                    </View>)}
+                </Pressable>
+              </View>);
+            })}
+        </View>)}
+    </View>);
+};
 const reduxValueStyles = StyleSheet.create({
     treeNodeBlock: {
         marginTop: 4,
@@ -224,6 +298,158 @@ const reduxValueStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
 });
+const timelineStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    headerTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors.primaryBlack,
+    },
+    clearBtn: {
+        backgroundColor: 'rgba(239, 68, 68, 0.08)',
+        borderColor: 'rgba(239, 68, 68, 0.2)',
+        borderWidth: 1,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    clearBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+        color: '#EF4444',
+    },
+    emptyContainer: {
+        paddingVertical: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.grayTextWeak,
+        textAlign: 'center',
+        lineHeight: 18,
+    },
+    listContainer: {
+        paddingLeft: 12,
+    },
+    timelineItem: {
+        position: 'relative',
+        paddingLeft: 20,
+        marginBottom: 12,
+    },
+    verticalLine: {
+        position: 'absolute',
+        left: 4,
+        top: 0,
+        bottom: -12,
+        width: 1,
+        backgroundColor: AppColors.dividerColor,
+    },
+    circleIndicator: {
+        position: 'absolute',
+        left: 0,
+        top: 10,
+        width: 9,
+        height: 9,
+        borderRadius: 4.5,
+        backgroundColor: AppColors.purpleShade50,
+        borderWidth: 1,
+        borderColor: AppColors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circleInner: {
+        width: 3,
+        height: 3,
+        borderRadius: 1.5,
+        backgroundColor: AppColors.purple,
+    },
+    card: {
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        borderRadius: 8,
+        padding: 10,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+    },
+    typeBadge: {
+        backgroundColor: 'rgba(104,75,155,0.08)',
+        borderColor: 'rgba(104,75,155,0.18)',
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        flexShrink: 1,
+    },
+    typeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.purple,
+    },
+    timestamp: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+    },
+    slicesRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 6,
+    },
+    slicesLabel: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+        marginRight: 2,
+    },
+    slicePill: {
+        backgroundColor: AppColors.grayBackground,
+        borderColor: AppColors.dividerColor,
+        borderWidth: 1,
+        borderRadius: 4,
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+    },
+    sliceText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9,
+        color: AppColors.grayText,
+    },
+    payloadContainer: {
+        marginTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: AppColors.dividerColor,
+        paddingTop: 8,
+    },
+    payloadTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+        textTransform: 'uppercase',
+        marginBottom: 4,
+    },
+    primitivePayload: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayTextStrong,
+    },
+});
 const styles = StyleSheet.create({
     container: {
         flex: 1,

package/dist/esm/customHooks/reduxLogger.d.ts

@@ -3,6 +3,14 @@ export declare const setReduxAutoRefresh: (val: boolean) => void;
 export declare const getReduxAutoRefresh: () => boolean;
 export declare const getLastActionForReducer: () => Record<string, any>;
 export declare const clearLastActionForReducer: () => void;
+export declare const getActionHistory: () => {
+    id: number;
+    type: string;
+    payload: any;
+    timestamp: string;
+    affectedSlices: string[];
+}[];
+export declare const clearActionHistory: () => void;
 export declare const setReduxState: (state: any) => void;
 export declare const subscribeReduxState: (cb: () => void) => () => void;
 export declare const connectReduxStore: (store: any) => void;

package/dist/esm/customHooks/reduxLogger.js

@@ -2,6 +2,7 @@ let currentReduxState = null;
 const listeners = new Set();
 let globalReduxAutoRefresh = true;
 let lastActionForReducer = {};
+let actionHistory = [];
 export const getReduxState = () => currentReduxState;
 export const setReduxAutoRefresh = (val) => {
     globalReduxAutoRefresh = val;
@@ -12,6 +13,11 @@ export const clearLastActionForReducer = () => {
     lastActionForReducer = {};
     listeners.forEach(cb => cb());
 };
+export const getActionHistory = () => actionHistory;
+export const clearActionHistory = () => {
+    actionHistory = [];
+    listeners.forEach(cb => cb());
+};
 export const setReduxState = (state) => {
     currentReduxState = state;
     listeners.forEach(cb => cb());
@@ -34,6 +40,7 @@ export const connectReduxStore = (store) => {
         const result = originalDispatch(action);
         const nextState = store.getState();
         // Map the dispatched action to state slices that actually changed
+        const affectedSlices = [];
         if (prevState &&
             nextState &&
             typeof prevState === 'object' &&
@@ -42,13 +49,27 @@ export const connectReduxStore = (store) => {
             typeof action === 'object') {
             Object.keys(nextState).forEach(key => {
                 if (prevState[key] !== nextState[key]) {
-                    lastActionForReducer[key] = {
+                    const actionObj = {
                         type: action.type || 'UNKNOWN_ACTION',
                         payload: action.payload !== undefined ? action.payload : null,
                         timestamp: new Date().toLocaleTimeString(),
                     };
+                    lastActionForReducer[key] = actionObj;
+                    affectedSlices.push(key);
                 }
             });
+            // Push to history
+            actionHistory.unshift({
+                id: Date.now() + Math.random(),
+                type: action.type || 'UNKNOWN_ACTION',
+                payload: action.payload !== undefined ? action.payload : null,
+                timestamp: new Date().toLocaleTimeString(),
+                affectedSlices,
+            });
+            // Cap size at 50
+            if (actionHistory.length > 50) {
+                actionHistory.pop();
+            }
         }
         if (globalReduxAutoRefresh) {
             setReduxState(nextState);

package/dist/esm/index.js

@@ -11,7 +11,7 @@ import CopyButton from './components/CopyButton';
 import SectionHeader from './components/SectionHeader';
 import EmptyState from './components/EmptyState';
 import JsonViewer from './components/JsonViewer';
-import { ReduxTreeView } from './components/ReduxTreeView';
+import { ReduxTreeView, ReduxActionTimeline } from './components/ReduxTreeView';
 import DomainHeader from './components/DomainHeader';
 import DiffViewer from './components/DiffViewer';
 import LogCard from './components/LogCard';
@@ -98,7 +98,7 @@ const previewInspectScript = `
 })();
 true;
 `;
-import { getReduxState, subscribeReduxState, setReduxAutoRefresh, getLastActionForReducer, } from './customHooks/reduxLogger';
+import { getReduxState, subscribeReduxState, setReduxAutoRefresh, getLastActionForReducer, getActionHistory, clearActionHistory, } from './customHooks/reduxLogger';
 import { METHOD_COLORS, STATUS_FILTERS } from './constants';
 const NavigationTracker = ({ onStateChange }) => {
     const navState = useNavigationState(state => state);
@@ -119,6 +119,7 @@ const NetworkInspector = ({ enabled = true }) => {
     const [search, setSearch] = useState('');
     const [detailSearch, setDetailSearch] = useState('');
     const [reduxSearch, setReduxSearch] = useState('');
+    const [reduxActiveSubTab, setReduxActiveSubTab] = useState('timeline');
     const [apiDetailActiveTab, setApiDetailActiveTab] = useState('response');
     useEffect(() => {
         if (enabled && visible) {
@@ -959,7 +960,7 @@ const NetworkInspector = ({ enabled = true }) => {
                     borderWidth: 1,
                     borderColor: 'rgba(255, 255, 255, 0.1)'
                 }}>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: '#FFFFFF' }}>v1.0.10</Text>
+                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: '#FFFFFF' }}>v1.0.12</Text>
               </View>
             </View>
           </LinearGradient>
@@ -1693,6 +1694,7 @@ const NetworkInspector = ({ enabled = true }) => {
         }
         // Build hierarchical tree: Store -> Reducers -> Action -> Data
         const lastActionMap = getLastActionForReducer();
+        const actionHistory = getActionHistory();
         return (<ScrollView style={styles.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
         {/* Top Summary Card */}
         <View style={{
@@ -1729,6 +1731,51 @@ const NetworkInspector = ({ enabled = true }) => {
           <CopyButton value={() => reduxState} label="Overall Store"/>
         </View>
 
+        {/* Tab View Selection Segments */}
+        <View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors.grayBackground,
+                borderRadius: 10,
+                padding: 3,
+                marginHorizontal: 16,
+                marginBottom: 12,
+                borderWidth: 1,
+                borderColor: AppColors.dividerColor,
+            }}>
+          <TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+                flex: 1,
+                paddingVertical: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: reduxActiveSubTab === 'timeline' ? AppColors.purple : 'transparent',
+            }}>
+            <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                color: reduxActiveSubTab === 'timeline' ? '#FFFFFF' : AppColors.grayText,
+            }}>
+              ⚡ Action Timeline
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setReduxActiveSubTab('tree')} style={{
+                flex: 1,
+                paddingVertical: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: reduxActiveSubTab === 'tree' ? AppColors.purple : 'transparent',
+            }}>
+            <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                color: reduxActiveSubTab === 'tree' ? '#FFFFFF' : AppColors.grayText,
+            }}>
+              🏪 Store Tree
+            </Text>
+          </TouchableOpacity>
+        </View>
+
         {/* Search Bar */}
         <View style={{
                 flexDirection: 'row',
@@ -1742,7 +1789,7 @@ const NetworkInspector = ({ enabled = true }) => {
                 borderColor: AppColors.dividerColor,
                 height: 36,
             }}>
-          <TextInput placeholder="Search Redux keys or values..." placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+          <TextInput placeholder={reduxActiveSubTab === 'timeline' ? "Search actions or payloads..." : "Search Redux keys or values..."} placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
                 flex: 1,
                 fontFamily: AppFonts.interRegular,
                 fontSize: 12,
@@ -1754,7 +1801,7 @@ const NetworkInspector = ({ enabled = true }) => {
             </Pressable>)}
         </View>
 
-        {/* Main Tree Card */}
+        {/* Main Content Card */}
         <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 12,
@@ -1763,7 +1810,7 @@ const NetworkInspector = ({ enabled = true }) => {
                 marginHorizontal: 16,
                 padding: 12,
             }}>
-          <ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
+          {reduxActiveSubTab === 'timeline' ? (<ReduxActionTimeline history={actionHistory} onClear={clearActionHistory} search={reduxSearch}/>) : (<ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>)}
         </View>
       </ScrollView>);
     };
@@ -1838,7 +1885,7 @@ const NetworkInspector = ({ enabled = true }) => {
                           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                             <Animated.View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#4ADE80', opacity: activePulseAnim }}/>
                             <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 10, color: 'rgba(255,255,255,0.78)', letterSpacing: 0.3 }}>
-                              Active • {Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.10)
+                              Active • {Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.12)
                             </Text>
                           </View>
                         </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",