1# Animations
2 
3Use Reanimated v4. Avoid React Native's built-in Animated API.
4 
5## Entering and Exiting Animations
6 
7Use Animated.View with entering and exiting animations. Layout animations can animate state changes.
8 
9```tsx
10import Animated, {
11  FadeIn,
12  FadeOut,
13  LinearTransition,
14} from "react-native-reanimated";
15 
16function App() {
17  return (
18    <Animated.View
19      entering={FadeIn}
20      exiting={FadeOut}
21      layout={LinearTransition}
22    />
23  );
24}
25```
26 
27## On-Scroll Animations
28 
29Create high-performance scroll animations using Reanimated's hooks:
30 
31```tsx
32import Animated, {
33  useAnimatedRef,
34  useScrollViewOffset,
35  useAnimatedStyle,
36  interpolate,
37} from "react-native-reanimated";
38 
39function Page() {
40  const ref = useAnimatedRef();
41  const scroll = useScrollViewOffset(ref);
42 
43  const style = useAnimatedStyle(() => ({
44    opacity: interpolate(scroll.value, [0, 30], [0, 1], "clamp"),
45  }));
46 
47  return (
48    <Animated.ScrollView ref={ref}>
49      <Animated.View style={style} />
50    </Animated.ScrollView>
51  );
52}
53```
54 
55## Common Animation Presets
56 
57### Entering Animations
58 
59- `FadeIn`, `FadeInUp`, `FadeInDown`, `FadeInLeft`, `FadeInRight`
60- `SlideInUp`, `SlideInDown`, `SlideInLeft`, `SlideInRight`
61- `ZoomIn`, `ZoomInUp`, `ZoomInDown`
62- `BounceIn`, `BounceInUp`, `BounceInDown`
63 
64### Exiting Animations
65 
66- `FadeOut`, `FadeOutUp`, `FadeOutDown`, `FadeOutLeft`, `FadeOutRight`
67- `SlideOutUp`, `SlideOutDown`, `SlideOutLeft`, `SlideOutRight`
68- `ZoomOut`, `ZoomOutUp`, `ZoomOutDown`
69- `BounceOut`, `BounceOutUp`, `BounceOutDown`
70 
71### Layout Animations
72 
73- `LinearTransition` — Smooth linear interpolation
74- `SequencedTransition` — Sequenced property changes
75- `FadingTransition` — Fade between states
76 
77## Customizing Animations
78 
79```tsx
80<Animated.View
81  entering={FadeInDown.duration(500).delay(200)}
82  exiting={FadeOut.duration(300)}
83/>
84```
85 
86### Modifiers
87 
88```tsx
89// Duration in milliseconds
90FadeIn.duration(300);
91 
92// Delay before starting
93FadeIn.delay(100);
94 
95// Spring physics
96FadeIn.springify();
97FadeIn.springify().damping(15).stiffness(100);
98 
99// Easing curves
100FadeIn.easing(Easing.bezier(0.25, 0.1, 0.25, 1));
101 
102// Chaining
103FadeInDown.duration(400).delay(200).springify();
104```
105 
106## Shared Value Animations
107 
108For imperative control over animations:
109 
110```tsx
111import {
112  useSharedValue,
113  withSpring,
114  withTiming,
115} from "react-native-reanimated";
116 
117const offset = useSharedValue(0);
118 
119// Spring animation
120offset.value = withSpring(100);
121 
122// Timing animation
123offset.value = withTiming(100, { duration: 300 });
124 
125// Use in styles
126const style = useAnimatedStyle(() => ({
127  transform: [{ translateX: offset.value }],
128}));
129```
130 
131## Gesture Animations
132 
133Combine with React Native Gesture Handler:
134 
135```tsx
136import { Gesture, GestureDetector } from "react-native-gesture-handler";
137import Animated, {
138  useSharedValue,
139  useAnimatedStyle,
140  withSpring,
141} from "react-native-reanimated";
142 
143function DraggableBox() {
144  const translateX = useSharedValue(0);
145  const translateY = useSharedValue(0);
146 
147  const gesture = Gesture.Pan()
148    .onUpdate((e) => {
149      translateX.value = e.translationX;
150      translateY.value = e.translationY;
151    })
152    .onEnd(() => {
153      translateX.value = withSpring(0);
154      translateY.value = withSpring(0);
155    });
156 
157  const style = useAnimatedStyle(() => ({
158    transform: [
159      { translateX: translateX.value },
160      { translateY: translateY.value },
161    ],
162  }));
163 
164  return (
165    <GestureDetector gesture={gesture}>
166      <Animated.View style={[styles.box, style]} />
167    </GestureDetector>
168  );
169}
170```
171 
172## Keyboard Animations
173 
174Animate with keyboard height changes:
175 
176```tsx
177import Animated, {
178  useAnimatedKeyboard,
179  useAnimatedStyle,
180} from "react-native-reanimated";
181 
182function KeyboardAwareView() {
183  const keyboard = useAnimatedKeyboard();
184 
185  const style = useAnimatedStyle(() => ({
186    paddingBottom: keyboard.height.value,
187  }));
188 
189  return <Animated.View style={style}>{/* content */}</Animated.View>;
190}
191```
192 
193## Staggered List Animations
194 
195Animate list items with delays:
196 
197```tsx
198{
199  items.map((item, index) => (
200    <Animated.View
201      key={item.id}
202      entering={FadeInUp.delay(index * 50)}
203      exiting={FadeOutUp}
204    >
205      <ListItem item={item} />
206    </Animated.View>
207  ));
208}
209```
210 
211## Best Practices
212 
213- Add entering and exiting animations for state changes
214- Use layout animations when items are added/removed from lists
215- Use `useAnimatedStyle` for scroll-driven animations
216- Prefer `interpolate` with "clamp" for bounded values
217- You can't pass PlatformColors to reanimated views or styles; use static colors instead
218- Keep animations under 300ms for responsive feel
219- Use spring animations for natural movement
220- Avoid animating layout properties (width, height) when possible — prefer transforms
221