0
# Layout Animations
1

2
Pre-built animations for component lifecycle events and layout changes that automatically trigger when components mount, unmount, or change layout properties.
3

4
## Capabilities
5

6
### Entry Animations
7

8
Animations that play when components first mount or appear.
9

10
#### Fade Entry Animations
11

12
```typescript { .api }
13
/** Fade in from transparent to opaque */
14
const FadeIn: IEntryExitAnimationBuilder;
15
/** Fade in while sliding from left */
16
const FadeInLeft: IEntryExitAnimationBuilder;
17
/** Fade in while sliding from right */
18
const FadeInRight: IEntryExitAnimationBuilder;
19
/** Fade in while sliding from top */
20
const FadeInUp: IEntryExitAnimationBuilder;
21
/** Fade in while sliding from bottom */
22
const FadeInDown: IEntryExitAnimationBuilder;
23
```
24

25
#### Slide Entry Animations
26

27
```typescript { .api }
28
/** Slide in from left edge */
29
const SlideInLeft: IEntryExitAnimationBuilder;
30
/** Slide in from right edge */
31
const SlideInRight: IEntryExitAnimationBuilder;
32
/** Slide in from top edge */
33
const SlideInUp: IEntryExitAnimationBuilder;
34
/** Slide in from bottom edge */
35
const SlideInDown: IEntryExitAnimationBuilder;
36
```
37

38
#### Bounce Entry Animations
39

40
```typescript { .api }
41
/** Bounce in with scale effect */
42
const BounceIn: IEntryExitAnimationBuilder;
43
/** Bounce in from left */
44
const BounceInLeft: IEntryExitAnimationBuilder;
45
/** Bounce in from right */
46
const BounceInRight: IEntryExitAnimationBuilder;
47
/** Bounce in from top */
48
const BounceInUp: IEntryExitAnimationBuilder;
49
/** Bounce in from bottom */
50
const BounceInDown: IEntryExitAnimationBuilder;
51
```
52

53
#### Zoom Entry Animations
54

55
```typescript { .api }
56
/** Zoom in from small to normal size */
57
const ZoomIn: IEntryExitAnimationBuilder;
58
/** Zoom in from left corner */
59
const ZoomInLeft: IEntryExitAnimationBuilder;
60
/** Zoom in from right corner */
61
const ZoomInRight: IEntryExitAnimationBuilder;
62
/** Zoom in from top */
63
const ZoomInUp: IEntryExitAnimationBuilder;
64
/** Zoom in from bottom */
65
const ZoomInDown: IEntryExitAnimationBuilder;
66
/** Easy zoom in from top */
67
const ZoomInEasyUp: IEntryExitAnimationBuilder;
68
/** Easy zoom in from bottom */
69
const ZoomInEasyDown: IEntryExitAnimationBuilder;
70
/** Zoom in with rotation effect */
71
const ZoomInRotate: IEntryExitAnimationBuilder;
72
```
73

74
#### Flip Entry Animations
75

76
```typescript { .api }
77
/** Flip in along X axis from top */
78
const FlipInXUp: IEntryExitAnimationBuilder;
79
/** Flip in along X axis from bottom */
80
const FlipInXDown: IEntryExitAnimationBuilder;
81
/** Flip in along Y axis from left */
82
const FlipInYLeft: IEntryExitAnimationBuilder;
83
/** Flip in along Y axis from right */
84
const FlipInYRight: IEntryExitAnimationBuilder;
85
/** Easy flip in along X axis */
86
const FlipInEasyX: IEntryExitAnimationBuilder;
87
/** Easy flip in along Y axis */
88
const FlipInEasyY: IEntryExitAnimationBuilder;
89
```
90

91
#### Additional Entry Animations
92

93
```typescript { .api }
94
/** Rotate in from down-left */
95
const RotateInDownLeft: IEntryExitAnimationBuilder;
96
/** Rotate in from down-right */
97
const RotateInDownRight: IEntryExitAnimationBuilder;
98
/** Rotate in from up-left */
99
const RotateInUpLeft: IEntryExitAnimationBuilder;
100
/** Rotate in from up-right */
101
const RotateInUpRight: IEntryExitAnimationBuilder;
102
/** Stretch in horizontally */
103
const StretchInX: IEntryExitAnimationBuilder;
104
/** Stretch in vertically */
105
const StretchInY: IEntryExitAnimationBuilder;
106
/** Roll in from left */
107
const RollInLeft: IEntryExitAnimationBuilder;
108
/** Roll in from right */
109
const RollInRight: IEntryExitAnimationBuilder;
110
/** Light speed in from left */
111
const LightSpeedInLeft: IEntryExitAnimationBuilder;
112
/** Light speed in from right */
113
const LightSpeedInRight: IEntryExitAnimationBuilder;
114
/** Pinwheel in effect */
115
const PinwheelIn: IEntryExitAnimationBuilder;
116
```
117

118
**Usage Examples:**
119

120
```typescript
121
import React, { useState } from "react";
122
import Animated, { 
123
  FadeIn, 
124
  SlideInLeft, 
125
  BounceIn,
126
  ZoomInRotate 
127
} from "react-native-reanimated";
128
import { Button } from "react-native";
129

130
const EntryAnimationExample = () => {
131
  const [showItems, setShowItems] = useState(false);
132

133
  return (
134
    <>
135
      <Button 
136
        title="Show Items" 
137
        onPress={() => setShowItems(!showItems)} 
138
      />
139
      
140
      {showItems && (
141
        <>
142
          {/* Basic fade in */}
143
          <Animated.View 
144
            entering={FadeIn}
145
            style={{ height: 50, backgroundColor: "red", margin: 5 }}
146
          >
147
            <Animated.Text>Fade In</Animated.Text>
148
          </Animated.View>
149

150
          {/* Slide in with custom duration */}
151
          <Animated.View 
152
            entering={SlideInLeft.duration(800)}
153
            style={{ height: 50, backgroundColor: "blue", margin: 5 }}
154
          >
155
            <Animated.Text>Slide In Left</Animated.Text>
156
          </Animated.View>
157

158
          {/* Bounce in with delay */}
159
          <Animated.View 
160
            entering={BounceIn.delay(500)}
161
            style={{ height: 50, backgroundColor: "green", margin: 5 }}
162
          >
163
            <Animated.Text>Bounce In</Animated.Text>
164
          </Animated.View>
165

166
          {/* Complex zoom with spring */}
167
          <Animated.View 
168
            entering={ZoomInRotate.springify().damping(8)}
169
            style={{ height: 50, backgroundColor: "purple", margin: 5 }}
170
          >
171
            <Animated.Text>Zoom In Rotate</Animated.Text>
172
          </Animated.View>
173
        </>
174
      )}
175
    </>
176
  );
177
};
178
```
179

180
### Exit Animations
181

182
Animations that play when components unmount or disappear.
183

184
```typescript { .api }
185
// All entry animations have corresponding exit versions
186
const FadeOut: IEntryExitAnimationBuilder;
187
const FadeOutLeft: IEntryExitAnimationBuilder;
188
const FadeOutRight: IEntryExitAnimationBuilder;
189
const FadeOutUp: IEntryExitAnimationBuilder;
190
const FadeOutDown: IEntryExitAnimationBuilder;
191

192
const SlideOutLeft: IEntryExitAnimationBuilder;
193
const SlideOutRight: IEntryExitAnimationBuilder;
194
const SlideOutUp: IEntryExitAnimationBuilder;
195
const SlideOutDown: IEntryExitAnimationBuilder;
196

197
const BounceOut: IEntryExitAnimationBuilder;
198
const BounceOutLeft: IEntryExitAnimationBuilder;
199
const BounceOutRight: IEntryExitAnimationBuilder;
200
const BounceOutUp: IEntryExitAnimationBuilder;
201
const BounceOutDown: IEntryExitAnimationBuilder;
202

203
const ZoomOut: IEntryExitAnimationBuilder;
204
const ZoomOutLeft: IEntryExitAnimationBuilder;
205
const ZoomOutRight: IEntryExitAnimationBuilder;
206
const ZoomOutUp: IEntryExitAnimationBuilder;
207
const ZoomOutDown: IEntryExitAnimationBuilder;
208
const ZoomOutEasyUp: IEntryExitAnimationBuilder;
209
const ZoomOutEasyDown: IEntryExitAnimationBuilder;
210
const ZoomOutRotate: IEntryExitAnimationBuilder;
211

212
// Additional exit animations...
213
```
214

215
**Usage Example:**
216

217
```typescript
218
import React, { useState } from "react";
219
import Animated, { 
220
  FadeIn, 
221
  FadeOut,
222
  SlideOutRight,
223
  ZoomOutRotate 
224
} from "react-native-reanimated";
225
import { Button } from "react-native";
226

227
const ExitAnimationExample = () => {
228
  const [items, setItems] = useState([1, 2, 3, 4]);
229

230
  const removeItem = (id: number) => {
231
    setItems(prev => prev.filter(item => item !== id));
232
  };
233

234
  return (
235
    <>
236
      {items.map((item) => (
237
        <Animated.View
238
          key={item}
239
          entering={FadeIn}
240
          exiting={item % 2 === 0 ? SlideOutRight : ZoomOutRotate}
241
          style={{
242
            height: 60,
243
            backgroundColor: "lightblue",
244
            margin: 5,
245
            borderRadius: 10,
246
            flexDirection: "row",
247
            alignItems: "center",
248
            justifyContent: "space-between",
249
            paddingHorizontal: 15,
250
          }}
251
        >
252
          <Animated.Text>Item {item}</Animated.Text>
253
          <Button title="Remove" onPress={() => removeItem(item)} />
254
        </Animated.View>
255
      ))}
256
    </>
257
  );
258
};
259
```
260

261
### Layout Transition Animations
262

263
Animations that play when component layout properties change.
264

265
```typescript { .api }
266
/** Default layout transition for position and size changes */
267
const Layout: ILayoutAnimationBuilder;
268
/** Linear transition for layout changes */
269
const LinearTransition: ILayoutAnimationBuilder;
270
/** Fading transition during layout changes */
271
const FadingTransition: ILayoutAnimationBuilder;
272
/** Sequenced transition with staggered timing */
273
const SequencedTransition: ILayoutAnimationBuilder;
274
/** Jumping transition with bounce effect */
275
const JumpingTransition: ILayoutAnimationBuilder;
276
/** Curved transition with custom path */
277
const CurvedTransition: ILayoutAnimationBuilder;
278
```
279

280
**Usage Example:**
281

282
```typescript
283
import React, { useState } from "react";
284
import Animated, { 
285
  Layout,
286
  LinearTransition,
287
  FadingTransition,
288
  FadeIn,
289
  FadeOut 
290
} from "react-native-reanimated";
291
import { Button } from "react-native";
292

293
const LayoutTransitionExample = () => {
294
  const [items, setItems] = useState([1, 2, 3, 4, 5]);
295
  const [isGrid, setIsGrid] = useState(false);
296

297
  const addItem = () => {
298
    setItems(prev => [...prev, Math.max(...prev) + 1]);
299
  };
300

301
  const removeItem = () => {
302
    setItems(prev => prev.slice(0, -1));
303
  };
304

305
  const shuffle = () => {
306
    setItems(prev => [...prev].sort(() => Math.random() - 0.5));
307
  };
308

309
  return (
310
    <>
311
      <Button title="Add Item" onPress={addItem} />
312
      <Button title="Remove Item" onPress={removeItem} />
313
      <Button title="Shuffle" onPress={shuffle} />
314
      <Button 
315
        title={isGrid ? "List View" : "Grid View"} 
316
        onPress={() => setIsGrid(!isGrid)} 
317
      />
318

319
      <Animated.View 
320
        layout={Layout.springify()}
321
        style={{
322
          flexDirection: isGrid ? "row" : "column",
323
          flexWrap: isGrid ? "wrap" : "nowrap",
324
          padding: 10,
325
        }}
326
      >
327
        {items.map((item) => (
328
          <Animated.View
329
            key={item}
330
            entering={FadeIn}
331
            exiting={FadeOut}
332
            layout={LinearTransition.springify()}
333
            style={{
334
              width: isGrid ? "45%" : "100%",
335
              height: 60,
336
              backgroundColor: `hsl(${item * 60}, 70%, 80%)`,
337
              margin: 5,
338
              borderRadius: 10,
339
              justifyContent: "center",
340
              alignItems: "center",
341
            }}
342
          >
343
            <Animated.Text>Item {item}</Animated.Text>
344
          </Animated.View>
345
        ))}
346
      </Animated.View>
347
    </>
348
  );
349
};
350
```
351

352
### Keyframe Animations
353

354
Custom animations defined using keyframe sequences.
355

356
```typescript { .api }
357
/**
358
 * Creates custom keyframe-based animations
359
 */
360
const Keyframe: {
361
  /**
362
   * Define keyframe animation with percentage-based timing
363
   * @param keyframes - Object with percentage keys and style values
364
   * @returns Keyframe animation builder
365
   */
366
  define(keyframes: Record<string | number, any>): IEntryExitAnimationBuilder;
367
};
368

369
interface ReanimatedKeyframe {
370
  0?: KeyframeProps;
371
  from?: KeyframeProps;
372
  to?: KeyframeProps;
373
  100?: KeyframeProps;
374
  [percent: number]: KeyframeProps;
375
}
376

377
interface KeyframeProps {
378
  transform?: any[];
379
  opacity?: number;
380
  backgroundColor?: string;
381
  // Any animatable style property
382
  [key: string]: any;
383
}
384
```
385

386
**Usage Example:**
387

388
```typescript
389
import React, { useState } from "react";
390
import Animated, { Keyframe } from "react-native-reanimated";
391
import { Button } from "react-native";
392

393
const KeyframeExample = () => {
394
  const [show, setShow] = useState(false);
395

396
  // Define custom keyframe animation
397
  const customKeyframe = Keyframe.define({
398
    0: {
399
      opacity: 0,
400
      transform: [{ scale: 0.3 }, { rotate: "0deg" }],
401
    },
402
    25: {
403
      opacity: 0.5,
404
      transform: [{ scale: 0.7 }, { rotate: "90deg" }],
405
    },
406
    50: {
407
      opacity: 0.8,
408
      transform: [{ scale: 1.2 }, { rotate: "180deg" }],
409
      backgroundColor: "red",
410
    },
411
    75: {
412
      opacity: 0.9,
413
      transform: [{ scale: 0.9 }, { rotate: "270deg" }],
414
      backgroundColor: "blue",
415
    },
416
    100: {
417
      opacity: 1,
418
      transform: [{ scale: 1 }, { rotate: "360deg" }],
419
      backgroundColor: "green",
420
    },
421
  }).duration(2000);
422

423
  // Bouncing keyframe
424
  const bounceKeyframe = Keyframe.define({
425
    from: {
426
      transform: [{ translateY: 0 }],
427
    },
428
    20: {
429
      transform: [{ translateY: -30 }],
430
    },
431
    40: {
432
      transform: [{ translateY: 0 }],
433
    },
434
    60: {
435
      transform: [{ translateY: -15 }],
436
    },
437
    80: {
438
      transform: [{ translateY: 0 }],
439
    },
440
    to: {
441
      transform: [{ translateY: 0 }],
442
    },
443
  }).duration(1000);
444

445
  return (
446
    <>
447
      <Button title="Toggle" onPress={() => setShow(!show)} />
448
      
449
      {show && (
450
        <>
451
          <Animated.View
452
            entering={customKeyframe}
453
            style={{
454
              width: 100,
455
              height: 100,
456
              backgroundColor: "lightblue",
457
              margin: 20,
458
              borderRadius: 10,
459
            }}
460
          >
461
            <Animated.Text>Custom</Animated.Text>
462
          </Animated.View>
463

464
          <Animated.View
465
            entering={bounceKeyframe.delay(500)}
466
            style={{
467
              width: 100,
468
              height: 100,
469
              backgroundColor: "lightcoral",
470
              margin: 20,
471
              borderRadius: 10,
472
            }}
473
          >
474
            <Animated.Text>Bounce</Animated.Text>
475
          </Animated.View>
476
        </>
477
      )}
478
    </>
479
  );
480
};
481
```
482

483
### Animation Builder Configuration
484

485
All layout animations can be customized using the builder pattern.
486

487
```typescript { .api }
488
interface IEntryExitAnimationBuilder {
489
  /** Set animation duration in milliseconds */
490
  duration(durationMs: number): IEntryExitAnimationBuilder;
491
  /** Add delay before animation starts */
492
  delay(delayMs: number): IEntryExitAnimationBuilder;
493
  /** Convert to spring-based animation */
494
  springify(): IEntryExitAnimationBuilder;
495
  /** Set spring damping factor */
496
  damping(dampingFactor: number): IEntryExitAnimationBuilder;
497
  /** Set spring mass */
498
  mass(mass: number): IEntryExitAnimationBuilder;
499
  /** Set spring stiffness */
500
  stiffness(stiffnessFactor: number): IEntryExitAnimationBuilder;
501
  /** Set spring overshoot clamping */
502
  overshootClamping(overshootClamping: number): IEntryExitAnimationBuilder;
503
  /** Set rest displacement threshold */
504
  restDisplacementThreshold(threshold: number): IEntryExitAnimationBuilder;
505
  /** Set rest speed threshold */
506
  restSpeedThreshold(threshold: number): IEntryExitAnimationBuilder;
507
  /** Add completion callback */
508
  withCallback(callback: (finished: boolean) => void): IEntryExitAnimationBuilder;
509
  /** Set initial values for the animation */
510
  withInitialValues(values: StyleProps): IEntryExitAnimationBuilder;
511
  /** Add random delay for staggered effects */
512
  randomDelay(): IEntryExitAnimationBuilder;
513
  /** Build the final animation function */
514
  build(): LayoutAnimationFunction;
515
}
516

517
interface ILayoutAnimationBuilder {
518
  /** Set animation duration in milliseconds */
519
  duration(durationMs: number): ILayoutAnimationBuilder;
520
  /** Add delay before animation starts */
521
  delay(delayMs: number): ILayoutAnimationBuilder;
522
  /** Convert to spring-based animation */
523
  springify(): ILayoutAnimationBuilder;
524
  /** Set spring damping factor */
525
  damping(dampingFactor: number): ILayoutAnimationBuilder;
526
  /** Set spring mass */
527
  mass(mass: number): ILayoutAnimationBuilder;
528
  /** Set spring stiffness */
529
  stiffness(stiffnessFactor: number): ILayoutAnimationBuilder;
530
  /** Set spring overshoot clamping */
531
  overshootClamping(overshootClamping: number): ILayoutAnimationBuilder;
532
  /** Set rest displacement threshold */
533
  restDisplacementThreshold(threshold: number): ILayoutAnimationBuilder;
534
  /** Set rest speed threshold */
535
  restSpeedThreshold(threshold: number): ILayoutAnimationBuilder;
536
  /** Add completion callback */
537
  withCallback(callback: (finished: boolean) => void): ILayoutAnimationBuilder;
538
  /** Add random delay for staggered effects */
539
  randomDelay(): ILayoutAnimationBuilder;
540
  /** Build the final animation function */
541
  build(): LayoutAnimationFunction;
542
}
543
```
544

545
**Configuration Examples:**
546

547
```typescript
548
import Animated, { 
549
  FadeIn, 
550
  SlideInLeft, 
551
  Layout,
552
  BounceIn 
553
} from "react-native-reanimated";
554

555
// Custom duration and delay
556
const customFadeIn = FadeIn.duration(800).delay(200);
557

558
// Spring-based animation with custom physics
559
const springSlide = SlideInLeft
560
  .springify()
561
  .damping(15)
562
  .stiffness(200)
563
  .mass(1.2);
564

565
// Animation with callback
566
const bounceWithCallback = BounceIn
567
  .duration(1000)
568
  .withCallback((finished) => {
569
    if (finished) {
570
      console.log("Bounce animation completed!");
571
    }
572
  });
573

574
// Layout transition with custom spring
575
const customLayout = Layout
576
  .springify()
577
  .damping(20)
578
  .stiffness(100)
579
  .randomDelay(); // Adds random delay for staggered effect
580

581
// Usage in components
582
const ConfiguredAnimations = () => (
583
  <>
584
    <Animated.View entering={customFadeIn}>
585
      <Animated.Text>Custom Fade</Animated.Text>
586
    </Animated.View>
587
    
588
    <Animated.View entering={springSlide} layout={customLayout}>
589
      <Animated.Text>Spring Slide</Animated.Text>
590
    </Animated.View>
591
  </>
592
);
593
```
594

595
## Type Definitions
596

597
```typescript { .api }
598
type LayoutAnimationFunction = (values: LayoutAnimationValues) => LayoutAnimation;
599

600
type EntryExitAnimationFunction = 
601
  | ((targetValues: EntryAnimationsValues) => LayoutAnimation)
602
  | ((targetValues: ExitAnimationsValues) => LayoutAnimation);
603

604
interface LayoutAnimation {
605
  initialValues: StyleProps;
606
  animations: StyleProps;
607
  callback?: (finished: boolean) => void;
608
}
609

610
interface EntryAnimationsValues {
611
  targetOriginX: number;
612
  targetOriginY: number;
613
  targetWidth: number;
614
  targetHeight: number;
615
  targetBorderRadius: number;
616
  targetGlobalOriginX: number;
617
  targetGlobalOriginY: number;
618
  windowWidth: number;
619
  windowHeight: number;
620
}
621

622
interface ExitAnimationsValues {
623
  currentOriginX: number;
624
  currentOriginY: number;
625
  currentWidth: number;
626
  currentHeight: number;
627
  currentBorderRadius: number;
628
  currentGlobalOriginX: number;
629
  currentGlobalOriginY: number;
630
  windowWidth: number;
631
  windowHeight: number;
632
}
633

634
interface LayoutAnimationValues extends EntryAnimationsValues, ExitAnimationsValues {}
635

636
enum LayoutAnimationType {
637
  ENTERING = 1,
638
  EXITING = 2,
639
  LAYOUT = 3,
640
}
641

642
interface BaseLayoutAnimationConfig {
643
  duration?: number;
644
  easing?: EasingFunction;
645
  type?: LayoutAnimationType;
646
  dampingRatio?: number;
647
  mass?: number;
648
  stiffness?: number;
649
  overshootClamping?: number;
650
  restDisplacementThreshold?: number;
651
  restSpeedThreshold?: number;
652
}
653
```