Skip to main content
Version: 4.x

Entering/Exiting animations

Entering/Exiting animations let you animate elements when they are added to or removed from the view hierarchy.

Reanimated comes with a bunch of predefined animations you can customize. For more advanced use-cases, you can use Keyframes or create your own custom entering/exiting animations.

Loading...
info

Spring-based animations are yet to be introduced to the web. Due to that, playground doesn't cover springify() options but they can be applied to your animations on iOS and Android platforms.

Remarks​

  • We recommend using layout animation builders outside of components or with useMemo to ensure the best performance.
  • withInitialValues and withTargetValues are typed per preset, so only props specific to the animation preset are accepted (see each preset's Values & Type definitions block).
  • Available from 4.4.0
    For transforms, prefer flat top-level props like { translateX: 50 } over transform: [{ translateX: 50 }]. The transform: [{ ... }] tuple form still works but is deprecated since 4.4.0.
  • withInitialValues overrides the initial values of the animation (the state the element starts from).
  • Available from 4.4.0
    withTargetValues overrides the target values of the animation (the state the element animates to).
  • Values & Type definitions blocks after each animation preset show the exact type for both withInitialValues and withTargetValues (they accept the same props per preset). The deprecated transform prop also shows the order in which transforms are applied. In the flat form, object key order is ignored and the preset applies transforms in its built-in order.
  • If both forms are used, the flat prop wins for that transform slot; remaining slots fall back to the tuple value, then to the preset default. Mixing forms is supported but not recommended.
  • On the New Architecture:
    • nativeID is used internally to configure entering animations, so overwriting it will result in entering animations not running. Some components (e.g. TouchableWithoutFeedback) overwrite nativeID of its children. To work around this issue wrap your animated children with a View.
    • removing a non-animated view will trigger exiting animations in its children, but the non-animated view will not wait for the children's animations to finish. This is due to view flattening and can be mitigated by using collapsable={false}.

Fade​

FadeX lets you create a fading animation.

import { FadeIn, FadeOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={FadeIn} exiting={FadeOut} />;
}

Available fade animations:

Entering​

  • FadeIn

  • FadeInRight

  • FadeInLeft

  • FadeInUp

  • FadeInDown

Exiting​

  • FadeOut

  • FadeOutRight

  • FadeOutLeft

  • FadeOutUp

  • FadeOutDown

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
FadeIn{ opacity: 0 }
FadeInDown{ opacity: 0, translateY: 25 }
FadeInLeft{ opacity: 0, translateX: -25 }
FadeInRight{ opacity: 0, translateX: 25 }
FadeInUp{ opacity: 0, translateY: -25 }
FadeOut{ opacity: 1 }
FadeOutDown{ opacity: 1, translateY: 0 }
FadeOutLeft{ opacity: 1, translateX: 0 }
FadeOutRight{ opacity: 1, translateX: 0 }
FadeOutUp{ opacity: 1, translateY: 0 }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

FadeOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

FadeInUp.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

FadeInDown.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ translateY: 420 })
  .withTargetValues({ translateY: 0 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Bounce​

BounceX lets you create a bouncing animation.

import { BounceIn, BounceOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={BounceIn} exiting={BounceOut} />;
}

Available bounce animations:

Entering​

  • BounceIn

  • BounceInRight

  • BounceInLeft

  • BounceInUp

  • BounceInDown

Exiting​

  • BounceOut

  • BounceOutRight

  • BounceOutLeft

  • BounceOutUp

  • BounceOutDown

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
BounceIn{ scale: 0 }
BounceInRight{ translateX: values.windowWidth }
BounceInLeft{ translateX: -values.windowWidth }
BounceInUp{ translateY: -values.windowHeight }
BounceInDown{ translateY: values.windowHeight }
BounceOut{ scale: 1 }
BounceOutRight{ translateX: 0 }
BounceOutLeft{ translateX: 0 }
BounceOutUp{ translateY: 0 }
BounceOutDown{ translateY: 0 }

Modifiers
Optional
​

BounceInDown.duration(500)
  .delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ translateY: -420 })
  .withTargetValues({ translateY: 0 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 600.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Flip​

FlipX lets you create animation based on rotation over specific axis.

import { FlipInEasyX, FlipOutEasyX } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={FlipInEasyX} exiting={FlipOutEasyX} />;
}

Available flip animations:

Entering​

  • FlipInEasyX

  • FlipInEasyY

  • FlipInXDown

  • FlipInXUp

  • FlipInYLeft

  • FlipInYRight

Exiting​

  • FlipOutEasyX

  • FlipOutEasyY

  • FlipOutXDown

  • FlipOutXUp

  • FlipOutYLeft

  • FlipOutYRight

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
FlipInEasyX{ perspective: 500, rotateX: '90deg' }
FlipInEasyY{ perspective: 500, rotateY: '90deg' }
FlipInXDown{ perspective: 500, rotateX: '-90deg', translateY: targetValues.targetHeight }
FlipInXUp{ perspective: 500, rotateX: '90deg', translateY: -targetValues.targetHeight }
FlipInYLeft{ perspective: 500, rotateY: '-90deg', translateX: -targetValues.targetWidth }
FlipInYRight{ perspective: 500, rotateY: '90deg', translateX: targetValues.targetWidth }
FlipOutEasyX{ perspective: 500, rotateX: '0deg' }
FlipOutEasyY{ perspective: 500, rotateY: '0deg' }
FlipOutXDown{ perspective: 500, rotateX: '0deg', translateY: 0 }
FlipOutXUp{ perspective: 500, rotateX: '0deg', translateY: 0 }
FlipOutYLeft{ perspective: 500, rotateY: '0deg', translateX: 0 }
FlipOutYRight{ perspective: 500, rotateY: '0deg', translateX: 0 }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

FlipOutYLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

FlipInXUp.springify()
  .damping(2)
  .mass(3)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

FlipInEasyY.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ perspective: 100, rotateY: '123deg' })
  .withTargetValues({ rotateY: '0deg' })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

LightSpeed​

LightSpeedX lets you create an animation of a horizontally moving object with a change of opacity and skew.

import { LightSpeedInRight, LightSpeedOutLeft } from 'react-native-reanimated';

function App() {
  return (
    <Animated.View entering={LightSpeedInRight} exiting={LightSpeedOutLeft} />
  );
}

Available lightspeed animations:

Entering​

  • LightSpeedInRight

  • LightSpeedInLeft

Exiting​

  • LightSpeedOutRight

  • LightSpeedOutLeft

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
LightSpeedInLeft{ opacity: 0, translateX: -values.windowWidth, skewX: '45deg' }
LightSpeedInRight{ opacity: 0, translateX: values.windowWidth, skewX: '-45deg' }
LightSpeedOutLeft{ opacity: 1, translateX: 0, skewX: '0deg' }
LightSpeedOutRight{ opacity: 1, translateX: 0, skewX: '0deg' }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

LightSpeedOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

LightSpeedInLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

LightSpeedInRight.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ translateX: -100, skewX: '-10deg' })
  .withTargetValues({ translateX: 0, skewX: '0deg' })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Pinwheel​

PinwheelX lets you create an animation based on rotation, scale, and opacity.

import { PinwheelIn, PinwheelOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={PinwheelIn} exiting={PinwheelOut} />;
}

Available pinwheel animations:

Entering​

  • PinwheelIn

Exiting​

  • PinwheelOut

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
PinwheelIn{ opacity: 0, scale: 0, rotate: '5' }
PinwheelOut{ opacity: 1, scale: 1, rotate: '0' }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

PinwheelOut.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

PinwheelIn.springify()
  .damping(2)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

PinwheelIn.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ scale: 0.8, rotate: '3' })
  .withTargetValues({ scale: 1, rotate: '0rad' })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Roll​

RollX lets you create an animation of a horizontally moving object with a rotation.

import { RollInRight, RollOutLeft } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={RollInRight} exiting={RollOutLeft} />;
}

Available roll animations:

Entering​

  • RollInRight

  • RollInLeft

Exiting​

  • RollOutRight

  • RollOutLeft

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
RollInLeft{ translateX: -values.windowWidth, rotate: '-180deg' }
RollInRight{ translateX: values.windowWidth, rotate: '180deg' }
RollOutLeft{ translateX: 0, rotate: '0deg' }
RollOutRight{ translateX: 0, rotate: '0deg' }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

RollOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

RollInLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

RollInRight.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ translateX: 100, rotate: '-45deg' })
  .withTargetValues({ translateX: 0, rotate: '0deg' })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Rotate​

RotateX lets you create a rotation animation.

import { RotateInDownLeft, RotateOutDownLeft } from 'react-native-reanimated';

function App() {
  return (
    <Animated.View entering={RotateInDownLeft} exiting={RotateOutDownLeft} />
  );
}

Available rotate animations:

Entering​

  • RotateInDownLeft

  • RotateInDownRight

  • RotateInUpLeft

  • RotateInUpRight

Exiting​

  • RotateOutDownLeft

  • RotateOutDownRight

  • RotateOutUpLeft

  • RotateOutUpRight

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
RotateInDownLeft{ opacity: 0, rotate: '-90deg', translateX: values.targetWidth / 2 - values.targetHeight / 2, translateY: -(values.targetWidth / 2 - values.targetHeight / 2) }
RotateInDownRight{ opacity: 0, rotate: '90deg', translateX: -(values.targetWidth / 2 - values.targetHeight / 2), translateY: -(values.targetWidth / 2 - values.targetHeight / 2) }
RotateInUpLeft{ opacity: 0, rotate: '90deg', translateX: values.targetWidth / 2 - values.targetHeight / 2, translateY: values.targetWidth / 2 - values.targetHeight / 2 }
RotateInUpRight{ opacity: 0, rotate: '-90deg', translateX: -(values.targetWidth / 2 - values.targetHeight / 2), translateY: values.targetWidth / 2 - values.targetHeight / 2 }
RotateOutDownLeft{ opacity: 1, rotate: '0deg', translateX: 0, translateY: 0 }
RotateOutDownRight{ opacity: 1, rotate: '0deg', translateX: 0, translateY: 0 }
RotateOutUpLeft{ opacity: 1, rotate: '0deg', translateX: 0, translateY: 0 }
RotateOutUpRight{ opacity: 1, rotate: '0deg', translateX: 0, translateY: 0 }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

RotateOutDownRight.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

RotateInUpLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

RotateInDownLeft.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ rotate: '-90deg', translateX: 100, translateY: 100 })
  .withTargetValues({ rotate: '0deg', translateX: 0, translateY: 0 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Slide​

SlideX lets you create an animation of horizontal or vertical moving object.

import { SlideInRight, SlideOutLeft } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={SlideInRight} exiting={SlideOutLeft} />;
}

Available slide animations:

Entering​

  • SlideInRight

  • SlideInLeft

  • SlideInUp

  • SlideInDown

Exiting​

  • SlideOutRight

  • SlideOutLeft

  • SlideOutUp

  • SlideOutDown

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
SlideInDown{ originY: values.targetOriginY + values.windowHeight }
SlideInLeft{ originX: values.targetOriginX - values.windowWidth }
SlideInRight{ originX: values.targetOriginX + values.windowWidth }
SlideInUp{ originY: -values.windowHeight }
SlideOutDown{ originY: values.currentOriginY }
SlideOutLeft{ originX: values.currentOriginX }
SlideOutRight{ originX: values.currentOriginX }
SlideOutUp{ originY: values.currentOriginY }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

SlideOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

SlideInUp.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

SlideInDown.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ originY: 420 })
  .withTargetValues({ originY: 0 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Stretch​

StretchX lets you create an animation based on scaling in X or Y axis.

import { StretchInX, StretchOutY } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={StretchInX} exiting={StretchOutY} />;
}

Available stretch animations:

Entering​

  • StretchInX

  • StretchInY

Exiting​

  • StretchOutX

  • StretchOutY

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
StretchInX{ scaleX: 0 }
StretchInY{ scaleY: 0 }
StretchOutX{ scaleX: 1 }
StretchOutY{ scaleY: 1 }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

StretchOutX.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

StretchInX.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

StretchInY.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ scaleY: 0.5 })
  .withTargetValues({ scaleY: 1 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Zoom​

ZoomX lets you create an animation based on scale.

import { ZoomIn, ZoomOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={ZoomIn} exiting={ZoomOut} />;
}

Available zoom animations:

Entering​

  • ZoomIn

  • ZoomInDown

  • ZoomInEasyDown

  • ZoomInEasyUp

  • ZoomInLeft

  • ZoomInRight

  • ZoomInRotate

  • ZoomInUp

Exiting​

  • ZoomOut

  • ZoomOutDown

  • ZoomOutEasyDown

  • ZoomOutEasyUp

  • ZoomOutLeft

  • ZoomOutRight

  • ZoomOutRotate

  • ZoomOutUp

Values & Type definitions

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
ZoomIn{ scale: 0 }
ZoomInDown{ translateY: values.windowHeight, scale: 0 }
ZoomInEasyDown{ translateY: values.targetHeight, scale: 0 }
ZoomInEasyUp{ translateY: -values.targetHeight, scale: 0 }
ZoomInLeft{ translateX: -values.windowWidth, scale: 0 }
ZoomInRight{ translateX: values.windowWidth, scale: 0 }
ZoomInRotate{ scale: 0, rotate: rotate }
ZoomInUp{ translateY: -values.windowHeight, scale: 0 }
ZoomOut{ scale: 1 }
ZoomOutDown{ translateY: 0, scale: 1 }
ZoomOutEasyDown{ translateY: 0, scale: 1 }
ZoomOutEasyUp{ translateY: 0, scale: 1 }
ZoomOutLeft{ translateX: 0, scale: 1 }
ZoomOutRight{ translateX: 0, scale: 1 }
ZoomOutRotate{ scale: 1, rotate: '0' }
ZoomOutUp{ translateY: 0, scale: 1 }

Modifiers​

Time-based
Optional
​

Time-based modifiers rely on withTiming function.

ZoomOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers rely on withSpring function.

ZoomInRotate.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .energyThreshold(6e-8);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .energyThreshold(value: number) decides relative energy threshold below which the spring will snap without further oscillations. Defaults to 6e-9.

Common
Optional
​

ZoomIn.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ scale: 0.5 })
  .withTargetValues({ scale: 1 })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values) overrides the initial values of the animation. Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • Available from 4.4.0
    .withTargetValues(values) overrides the target values of the animation (the state the element animates to). Each preset accepts only the properties it animates (see the Values & Type definitions block above).
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Platform compatibility​

AndroidiOSWeb
✅✅✅