Motion

useEntranceAnimation

A Reanimated hook for entrance and exit animations. Returns an AnimatedStyle driven by a visible boolean. Automatically respects the OS reduced-motion setting.

Import

typescript

import { useEntranceAnimation } from 'reactnatively';
// or
import { useEntranceAnimation } from 'reactnatively/animations';

Signature

typescript

function useEntranceAnimation(config?: EntranceAnimationConfig): AnimatedStyle<ViewStyle>

interface EntranceAnimationConfig {
  variant?:     EntranceVariant;  // default 'fade'
  delay?:       number;           // ms before animation starts, default 0
  slideOffset?: number;           // px slide distance, default 20
  visible?:     boolean;          // drives in/out, default true
}

type EntranceVariant = 'fade' | 'slideUp' | 'slideDown' | 'scale' | 'none';

Variants

Variant	Entrance	Exit	Best for
fade	opacity 0→1	opacity 1→0	General purpose. Subtle and versatile.
scale	scale 0.92→1 + fade	scale 1→0.92 + fade	Modals, popovers, tooltips.
slideUp	translateY +offset→0 + fade	translateY 0→+offset + fade	Bottom sheets, cards appearing from below.
slideDown	translateY -offset→0 + fade	translateY 0→-offset + fade	Dropdowns, menus appearing from above.
none	instant	instant	Skip animation (override for specific elements).

Basic usage

AnimatedPanel.tsx

1import { useState } from 'react';2import { useEntranceAnimation } from 'reactnatively';3import Animated from 'react-native-reanimated';4import { Pressable, Text, View } from 'react-native';56export function AnimatedPanel() {7  const [visible, setVisible] = useState(false);89  const style = useEntranceAnimation({10    variant: 'slideUp',11    visible,12    delay:   50,13  });1415  return (16    <View>17      <Pressable onPress={() => setVisible((v) => !v)}>18        <Text style={{ color: '#fff' }}>Toggle panel</Text>19      </Pressable>2021      <Animated.View style={style}>22        <View style={{ padding: 20, marginTop: 12, borderRadius: 16, backgroundColor: 'rgba(255,255,255,0.08)' }}>23          <Text style={{ color: '#fff' }}>Animated panel</Text>24        </View>25      </Animated.View>26    </View>27  );28}

Staggered list animation

StaggeredList.tsx

1import { useEntranceAnimation } from 'reactnatively';2import Animated from 'react-native-reanimated';3import { View, Text } from 'react-native';45const items = ['Dashboard', 'Analytics', 'Settings', 'Profile'];67function ListRow({ label, index }: { label: string; index: number }) {8  const style = useEntranceAnimation({9    variant: 'slideUp',10    visible: true,11    delay:   index * 60,   // stagger by 60ms per item12  });1314  return (15    <Animated.View style={style}>16      <View style={{ padding: 16, borderRadius: 12, backgroundColor: 'rgba(255,255,255,0.05)', marginBottom: 8 }}>17        <Text style={{ color: '#fff', fontWeight: '500' }}>{label}</Text>18      </View>19    </Animated.View>20  );21}2223export function StaggeredList() {24  return (25    <View style={{ padding: 16 }}>26      {items.map((item, i) => (27        <ListRow key={item} label={item} index={i} />28      ))}29    </View>30  );31}