react-native-inapp-inspector 1.0.15 → 1.0.16

package/dist/commonjs/index.js

@@ -59,6 +59,7 @@ const SourcePageCard_1 = __importDefault(require("./components/SourcePageCard"))
 const ConsoleLogCard_1 = require("./components/ConsoleLogCard");
 const HighlightText_1 = __importDefault(require("./components/HighlightText"));
 const CodeSnippet_1 = __importDefault(require("./components/CodeSnippet"));
+const AnimatedEntrance_1 = __importDefault(require("./components/AnimatedEntrance"));
 // Helpers
 const helpers_1 = require("./helpers");
 // Assets
@@ -146,6 +147,9 @@ const NavigationTracker = ({ onStateChange }) => {
     }, [navState, onStateChange]);
     return null;
 };
+const animateNextLayout = () => {
+    react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+};
 const NetworkInspector = ({ enabled = true, }) => {
     const [isDark, setIsDark] = (0, react_1.useState)(false);
     const [reduxState, setReduxState] = (0, react_1.useState)(null);
@@ -274,12 +278,18 @@ const NetworkInspector = ({ enabled = true, }) => {
             const nextVal = !prev[key];
             const newVisibility = { ...prev, [key]: nextVal };
             if (!nextVal && activeTab === key) {
+                animateNextLayout();
                 setActiveTab('apis');
             }
             return newVisibility;
         });
     };
+    const switchActiveTab = (0, react_1.useCallback)((key) => {
+        animateNextLayout();
+        setActiveTab(key);
+    }, []);
     const navigateFromDashboard = (key) => {
+        animateNextLayout();
         setTabVisibility(prev => ({ ...prev, [key]: true }));
         setActiveTab(key);
     };
@@ -352,6 +362,11 @@ const NetworkInspector = ({ enabled = true, }) => {
     const badgeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const activePulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.4)).current;
     const unreadPulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'android') {
+            react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
             react_native_1.Animated.timing(pulseAnim, {
@@ -811,6 +826,7 @@ const NetworkInspector = ({ enabled = true, }) => {
         return Object.entries(freq).sort((a, b) => b[1] - a[1]);
     }, [filteredAnalyticsEvents]);
     function closeModal() {
+        animateNextLayout();
         setVisible(false);
         setSelected(null);
         setSelectedEvent(null);
@@ -928,12 +944,14 @@ const NetworkInspector = ({ enabled = true, }) => {
             return next;
         });
     }, []);
-    const renderItem = (0, react_1.useCallback)(({ item }) => {
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => {
         if (item.type === 'header') {
-            return (<DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>);
+            return (<AnimatedEntrance_1.default index={index} distance={8}>
+            <DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>
+          </AnimatedEntrance_1.default>);
         }
         const { log, isLast, color } = item;
-        return (<react_native_1.View style={styles_1.default.treeNodeRow}>
+        return (<AnimatedEntrance_1.default index={index} distance={8} style={styles_1.default.treeNodeRow}>
           <react_native_1.View style={styles_1.default.treeLines}>
             <react_native_1.View style={[
                 styles_1.default.modernTreeLine,
@@ -943,9 +961,12 @@ const NetworkInspector = ({ enabled = true, }) => {
             {!isLast && (<react_native_1.View style={[styles_1.default.modernTreeBranch, { borderColor: color }]}/>)}
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.treeCardWrapper}>
-            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => setSelected(log)} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
+                animateNextLayout();
+                setSelected(log);
+            }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
           </react_native_1.View>
-        </react_native_1.View>);
+        </AnimatedEntrance_1.default>);
     }, [
         minStart,
         totalRange,
@@ -971,8 +992,9 @@ const NetworkInspector = ({ enabled = true, }) => {
           <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
             <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale_1.default onPress={() => {
+                    animateNextLayout();
                     setSettingsPage(null);
-                    setActiveTab('apis');
+                    switchActiveTab('apis');
                 }} hitSlop={12} style={{
                     padding: 8,
                     borderRadius: 10,
@@ -1153,7 +1175,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         </react_native_1.View>)}
 
                       {/* Settings gear icon next to label */}
-                      <TouchableScale_1.default onPress={() => setSettingsPage(tab.key)} hitSlop={8} style={{
+                      <TouchableScale_1.default onPress={() => {
+                            animateNextLayout();
+                            setSettingsPage(tab.key);
+                        }} hitSlop={8} style={{
                             marginLeft: 4,
                             padding: 4,
                             borderRadius: 6,
@@ -1288,7 +1313,10 @@ const NetworkInspector = ({ enabled = true, }) => {
           </react_native_1.ScrollView>
         </react_native_1.View>);
         }
-        const goBackToMain = () => setSettingsPage('main');
+        const goBackToMain = () => {
+            animateNextLayout();
+            setSettingsPage('main');
+        };
         const renderSubHeader = (title, icon, rightInfo) => (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -1885,7 +1913,7 @@ const NetworkInspector = ({ enabled = true, }) => {
         const webviewTotal = webViewNavHistory.length;
         return (<react_native_1.View style={styles_1.default.dashboardContainer}>
         {/* Module 1: APIs */}
-        {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('apis')}>
+        {tabVisibility.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={18}/>
@@ -1926,7 +1954,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 2: Logs */}
-        {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('logs')}>
+        {tabVisibility.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.TerminalIcon color="#0D9488" size={18}/>
@@ -1967,7 +1995,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 3: Analytics */}
-        {tabVisibility.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('analytics')}>
+        {tabVisibility.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
@@ -2004,7 +2032,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 4: WebView */}
-        {tabVisibility.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('webview')}>
+        {tabVisibility.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
@@ -2037,7 +2065,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale_1.default>)}
 
         {/* Module 5: Redux Store */}
-        {tabVisibility.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => setActiveTab('redux')}>
+        {tabVisibility.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
             <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
@@ -2188,7 +2216,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.dividerColor,
             }}>
-          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+          <react_native_1.TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('timeline');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
@@ -2208,7 +2239,10 @@ const NetworkInspector = ({ enabled = true, }) => {
               ⚡ Action Timeline
             </react_native_1.Text>
           </react_native_1.TouchableOpacity>
-          <react_native_1.TouchableOpacity onPress={() => setReduxActiveSubTab('tree')} style={{
+          <react_native_1.TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('tree');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
@@ -2304,6 +2338,7 @@ const NetworkInspector = ({ enabled = true, }) => {
             ]}>
                       <TouchableScale_1.default onPress={() => {
                 requestAnimationFrame(() => {
+                    animateNextLayout();
                     setSelected(null);
                     setSelectedEvent(null);
                 });
@@ -2521,7 +2556,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         consoleLogs.length > lastReadLogsCount;
                     return (<TouchableScale_1.default key={tab.key} onPress={() => {
                             requestAnimationFrame(() => {
-                                setActiveTab(tab.key);
+                                switchActiveTab(tab.key);
                             });
                         }} style={[
                             styles_1.default.contentTabButton,
@@ -2620,7 +2655,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('ga_events')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('ga_events');
+                }}>
                           <react_native_1.Text style={[
                     {
                         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -2654,7 +2692,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('top_events')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('top_events');
+                }}>
                           <react_native_1.Text style={[
                     {
                         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -2677,10 +2718,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                     </react_native_1.ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<react_native_1.FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
                     styles_1.default.listContent,
                     { paddingHorizontal: 16, paddingTop: 16 },
-                ]} renderItem={({ item: [name, count] }) => {
+                ]} renderItem={({ item: [name, count], index }) => {
                     const maxCount = topEventsArray[0]?.[1] || 1;
                     const color = (0, AnalyticsEventCard_1.getEventColor)(name);
-                    return (<react_native_1.View style={[
+                    return (<AnimatedEntrance_1.default index={index} distance={8} style={[
                             styles_1.default.analyticsTopEventsCard,
                             { marginBottom: 12, paddingVertical: 16 },
                         ]}>
@@ -2716,7 +2757,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                   {count}
                                 </react_native_1.Text>
                               </react_native_1.View>
-                            </react_native_1.View>);
+                            </AnimatedEntrance_1.default>);
                 }} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                             <react_native_1.View style={styles_1.default.emptyIconWrap}>
                               <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
@@ -2733,7 +2774,11 @@ const NetworkInspector = ({ enabled = true, }) => {
                         ? Math.floor(next.timestamp / 60000)
                         : -1;
                     const showTimestamp = index === 0 || thisMin !== nextMin;
-                    return (<AnalyticsEventCard_1.default event={item} onPress={() => setSelectedEvent(item)} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
+                    return (<AnimatedEntrance_1.default index={index} distance={8}>
+                              <AnalyticsEventCard_1.default event={item} onPress={() => {
+                            animateNextLayout();
+                            setSelectedEvent(item);
+                        }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
                             let screenName = item.screenName ||
                                 item.screenClass ||
                                 item.pageTitle ||
@@ -2751,7 +2796,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 }
                             }
                             return screenName;
-                        })()}/>);
+                        })()}/>
+                            </AnimatedEntrance_1.default>);
                 }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                             <react_native_1.View style={styles_1.default.emptyIconWrap}>
                               <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
@@ -3182,7 +3228,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 {filtered}/{total}) logs is showing
                               </react_native_1.Text>);
                     }
-                })()} renderItem={({ item }) => (<ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
+                })()} renderItem={({ item, index }) => (<AnimatedEntrance_1.default index={index} distance={8}>
+                            <ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>
+                          </AnimatedEntrance_1.default>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
                     styles_1.default.listContent,
                     filteredConsoleLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>
@@ -3302,7 +3350,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('preview')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('preview');
+                }}>
                               <NetworkIcons_1.EyeIcon color={webViewSubTab === 'preview'
                     ? '#FFFFFF'
                     : AppColors_1.AppColors.grayTextWeak} size={13}/>
@@ -3336,7 +3387,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('html')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('html');
+                }}>
                               <NetworkIcons_1.HtmlIcon color={webViewSubTab === 'html'
                     ? '#FFFFFF'
                     : AppColors_1.AppColors.grayTextWeak} size={13}/>
@@ -3370,7 +3424,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('navigation')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('navigation');
+                }}>
                               <NetworkIcons_1.ClockIcon color={webViewSubTab === 'navigation'
                     ? '#FFFFFF'
                     : AppColors_1.AppColors.grayTextWeak} size={13}/>
@@ -3404,7 +3461,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors_1.AppColors.purple,
                         borderColor: AppColors_1.AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('console')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('console');
+                }}>
                               <NetworkIcons_1.TerminalIcon color={webViewSubTab === 'console'
                     ? '#FFFFFF'
                     : AppColors_1.AppColors.grayTextWeak} size={13}/>
@@ -3493,7 +3553,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 : tab === 'css'
                                     ? '#2563EB' // Blue
                                     : '#D97706'; // Dark Yellow/Amber
-                            return (<react_native_1.Pressable key={tab} onPress={() => setHtmlSubTab(tab)} style={{
+                            return (<react_native_1.Pressable key={tab} onPress={() => {
+                                    animateNextLayout();
+                                    setHtmlSubTab(tab);
+                                }} style={{
                                     paddingVertical: 8,
                                     paddingHorizontal: 4,
                                     borderBottomWidth: 2,
@@ -3588,7 +3651,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                             const d = new Date(ts);
                             return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
                         };
-                        return (<react_native_1.View style={{
+                        return (<AnimatedEntrance_1.default index={index} distance={8} style={{
                                 marginHorizontal: 16,
                                 marginVertical: 6,
                                 borderRadius: 12,
@@ -3681,7 +3744,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     </react_native_1.View>
                                   </react_native_1.View>
                                   <CopyButton_1.default value={item.url} label="URL"/>
-                                </react_native_1.View>);
+                                </AnimatedEntrance_1.default>);
                     }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
                         styles_1.default.listContent,
                         filteredNavHistory.length === 0 && {
@@ -3726,7 +3789,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     : AppColors_1.AppColors.primaryLight;
                             const d = new Date(item.timestamp);
                             const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-                            return (<react_native_1.View style={{
+                            return (<AnimatedEntrance_1.default index={item.id} distance={8} style={{
                                     marginHorizontal: 12,
                                     marginVertical: 3,
                                     borderRadius: 8,
@@ -3775,7 +3838,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                           {item.message}
                                         </react_native_1.Text>
                                       </react_native_1.View>
-                                    </react_native_1.View>);
+                                    </AnimatedEntrance_1.default>);
                         }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
                             styles_1.default.listContent,
                             webViewLogs.length === 0 && { flexGrow: 1 },
@@ -4050,7 +4113,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                             return <NetworkIcons_1.RequestIcon color={iconColor}/>;
                         return <NetworkIcons_1.ResponseIcon color={iconColor}/>;
                     };
-                    return (<react_native_1.TouchableOpacity key={tab} onPress={() => setApiDetailActiveTab(tab)} style={{
+                    return (<react_native_1.TouchableOpacity key={tab} onPress={() => {
+                            animateNextLayout();
+                            setApiDetailActiveTab(tab);
+                        }} style={{
                             flex: 1,
                             paddingVertical: 6,
                             flexDirection: 'row',

package/dist/esm/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/esm/components/AnimatedEntrance.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+    const progress = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        progress.setValue(0);
+        Animated.timing(progress, {
+            toValue: 1,
+            duration,
+            delay: delay + Math.min(index, 12) * 18,
+            useNativeDriver: true,
+        }).start();
+    }, [delay, duration, index, progress]);
+    return (<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}
+    </Animated.View>);
+};
+export default AnimatedEntrance;