Entering Animations

tip

Layout Animations are available since v2.3.0

In React Native every component appears instantly whenever you add it to the component hierarchy. It's not something we are used to in the real world. Layout Animations are here to address the problem and help you animate an appearance of any view.

We provide an easy API that allows you to code almost any animation you want. Because some of the animations are more frequently used than the others we coded them for you and provided in an accessible way. Below you can find an instruction step by step explaining how to use them. A little further down you will find a detailed description of all the predefined entering animations.

If you want to create more complex animation you can use Keyframes.

How to use predefined entering animation?

1. Import chosen animation

// AnimationName is just an example and should be replaced by real animation. For Instance FadeIn
import { AnimationName } from 'react-native-reanimated';

2. Choose Animated Component which entering you want to animate

// AnimatedComponent - component created by createAnimatedComponent or imported from Reanimated
<AnimatedComponent entering={AnimationName} >

3. Customize the animation

Different type of entering animations can be customized differently. For the complete list of option please refer to the paragraph specific to the particular animation type.

<AnimatedComponent entering={AnimationName.duration(3000).otherModifier()} >

Predefined Animations

Below we listed all of the currently available predefined entering animations grouped by their type. Each group contains all of its modifiers and a video presenting what it looks like when applied to a simple button.

If you cannot find an animation that suits you then you can create a custom one. If you think that the animation should be here, please open an issue or create a pull request.

Fade

Simple animation based on changing of opacity.

Animations

• FadeIn
• FadeInRight
• FadeInLeft
• FadeInUp
• FadeInDown

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Bounce

Animation based on smoothly shaking of component.

Animations

• BounceIn
• BounceInRight
• BounceInLeft
• BounceInUp
• BounceInDown

Modifiers

• duration (in ms) default: 250
• delay (in ms) default: 0
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Flip

3D animation based on flipping object over specific axis.

Animations

• FlipInYRight
• FlipInYLeft
• FlipInXUp
• FlipInXDown
• FlipInEasyX
• FlipInEasyY

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Stretch

Animation based on changing width or height of object.

Animations

• StretchInX
• StretchInY

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Zoom

Animation based on changing scale of object.

Animations

• ZoomIn
• ZoomInRotate
• ZoomInRight
• ZoomInLeft
• ZoomInUp
• ZoomInDown
• ZoomInEasyUp
• ZoomInEasyDown

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Slide

Animation based on horizontal or vertical moving of object.

Animations

• SlideInRight
• SlideInLeft
• SlideInUp
• SlideInDown

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

LightSpeed

Animation based on horizontal moving of object with changing of opacity and skew.

Animations

• LightSpeedInRight
• LightSpeedInLeft

Modifiers

• duration (in ms) default: 250
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Pinwheel

Animation based on rotation with scale and opacity change.

Animations

• PinwheelIn

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Roll

Animation based on horizontal moving of object with rotation.

Animations

• RollInLeft
• RollInRight

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Rotate

Animation based on rotation of object.

Animations

• RotateInDownLeft
• RotateInDownRight
• RotateInUpLeft
• RotateInUpRight

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the entry animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example