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.
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. - 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) overwritenativeID
of its children. To work around this issue wrap your animated children with aView
.- 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


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
FadeIn | {opacity: 0} |
FadeInDown | {opacity: 0, transform: [{ translateY: 25 }]} |
FadeInLeft | {opacity: 0, transform: [{ translateX: -25 }]} |
FadeInRight | {opacity: 0, transform: [{ translateX: 25 }]} |
FadeInUp | {opacity: 0, transform: [{ translateY: -25 }]} |
FadeOut | {opacity: 1} |
FadeOutDown | {opacity: 1, transform: [{ translateY: 0 }]} |
FadeOutLeft | {opacity: 1, transform: [{ translateX: 0 }]} |
FadeOutRight | {opacity: 1, transform: [{ translateX: 0 }]} |
FadeOutUp | {opacity: 1, transform: [{ translateY: 0 }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
FadeOutLeft.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
FadeInUp.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
FadeInDown.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({ transform: [{ translateY: 420 }] })
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..reduceMotion(reduceMotion: ReduceMotion)
determines how the animation responds to the device's reduced motion accessibility setting..randomDelay()
randomizes the delay of the animation between0
and the provided delay. Uses 1000 ms if delay wasn't provided..withInitialValues(values: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
BounceIn | {transform: [{ scale: 0 }]} |
BounceInRight | {transform: [{ translateX: values.windowWidth }]} |
BounceInLeft | {transform: [{ translateX: -values.windowWidth }]} |
BounceInUp | {transform: [{ translateY: -values.windowHeight }]} |
BounceInDown | {transform: [{ translateY: values.windowHeight}]} |
BounceOut | {transform: [{ scale: 1 }]} |
BounceOutRight | {transform: [{ translateX: 0 }]} |
BounceOutLeft | {transform: [{ translateX: 0 }]} |
BounceOutUp | {transform: [{ translateY: 0 }]} |
BounceOutDown | {transform: [{ translateY: 0 }]} |
Modifiers Optional
BounceInDown.duration(500)
.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({ transform: [{ translateY: -420 }] })
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to600
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
FlipInEasyX | {transform: [{ perspective: 500 }, { rotateX: '90deg' }]} |
FlipInEasyY | {transform: [{ perspective: 500 }, { rotateY: '90deg' }]} |
FlipInXDown | {transform: [{ perspective: 500 }, { rotateX: '-90deg' }, { translateY: targetValues.targetHeight }]} |
FlipInXUp | {transform: [{ perspective: 500 }, { rotateX: '90deg' }, { translateY: -targetValues.targetHeight }]} |
FlipInYLeft | {transform: [{ perspective: 500 }, { rotateY: '-90deg' }, { translateX: -targetValues.targetWidth } ]} |
FlipInYRight | {transform: [{ perspective: 500 }, { rotateY: '90deg' }, { translateX: targetValues.targetWidth } ]} |
FlipOutEasyX | {transform: [{ perspective: 500 }, { rotateX: '0deg' }]} |
FlipOutEasyY | {transform: [{ perspective: 500 }, { rotateY: '0deg' }]} |
FlipOutXDown | {transform: [{ perspective: 500 }, { rotateX: '0deg' }, { translateY: 0 }]} |
FlipOutXUp | {transform: [{ perspective: 500 }, { rotateX: '0deg' }, { translateY: 0 }]} |
FlipOutYLeft | {transform: [{ perspective: 500 }, { rotateY: '0deg' }, { translateX: 0 }]} |
FlipOutYRight | {transform: [{ perspective: 500 }, { rotateY: '0deg' }, { translateX: 0 }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
FlipOutYLeft.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
FlipInXUp.springify()
.damping(2)
.mass(3)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
FlipInEasyY.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({
transform: [{ perspective: 100 }, { rotateY: '123deg' }],
})
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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:


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
LightSpeedInLeft | {opacity: 0, transform: [{ translateX: -values.windowWidth }, { skewX: '45deg' }]} |
LightSpeedInRight | {opacity: 0, transform: [{ translateX: values.windowWidth }, { skewX: '-45deg' }]} |
LightSpeedOutLeft | {opacity: 1, transform: [{ translateX: 0 }, { skewX: '0deg' }]} |
LightSpeedOutRight | {opacity: 1, transform: [{ translateX: 0 }, { skewX: '0deg' }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
LightSpeedOutLeft.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
LightSpeedInLeft.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
LightSpeedInRight.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({
transform: [{ translateX: -100 }, { skewX: '-10deg' }],
})
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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:


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
PinwheelIn | {opacity: 0, transform: [{ scale: 0 }, {rotate: '5'}]} |
PinwheelOut | {opacity: 1, transform: [{ scale: 1 }, {rotate: '0'}]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
PinwheelOut.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
PinwheelIn.springify()
.damping(2)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
PinwheelIn.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({
transform: [{ scale: 0.8 }, { rotate: '3' }],
})
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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:


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
RollInLeft | {transform: [{ translateX: -values.windowWidth }, { rotate: '-180deg' }]} |
RollInRight | {transform: [{ translateX: values.windowWidth }, { rotate: '180deg' }]} |
RollOutLeft | {transform: [{ translateX: 0 }, { rotate: '0deg' }]} |
RollOutRight | {transform: [{ translateX: 0 }, { rotate: '0deg' }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
RollOutLeft.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
RollInLeft.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
RollInRight.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({ transform: [{ translateX: 100 }, { rotate: '-45deg' }] })
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
RotateInDownLeft | {opacity: 0, transform: [{ rotate: '-90deg' }, { translateX: values.targetWidth / 2 - values.targetHeight / 2 }, { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) }]} |
RotateInDownRight | {opacity: 0, transform: [{ rotate: '90deg' }, { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) }, { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) }]} |
RotateInUpLeft | {opacity: 0, transform: [{ rotate: '90deg' }, { translateX: values.targetWidth / 2 - values.targetHeight / 2 }, { translateY: values.targetWidth / 2 - values.targetHeight / 2 }]} |
RotateInUpRight | {opacity: 0, transform: [{ rotate: '-90deg' }, { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) }, { translateY: values.targetWidth / 2 - values.targetHeight / 2 }]} |
RotateOutDownLeft | {opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]} |
RotateOutDownRight | {opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]} |
RotateOutUpLeft | {opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]} |
RotateOutUpRight | {opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
RotateOutDownRight.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
RotateInUpLeft.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
RotateInDownLeft.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({
transform: [{ rotate: '-90deg' }, { translateX: 100 }, { translateY: 100 }],
})
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
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 relay on withTiming
function.
SlideOutLeft.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
SlideInUp.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
SlideInDown.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({ transform: [{ translateY: 420 }] })
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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:


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
StretchInX | {transform: [{ scaleX: 0 }]} |
StretchInY | {transform: [{ scaleY: 0 }]} |
StretchOutX | {transform: [{ scaleX: 1 }]} |
StretchOutY | {transform: [{ scaleY: 1 }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
StretchOutX.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
StretchInX.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(5);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
StretchInY.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({ transform: [{ scaleY: 0.5 }] })
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
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


Initial values
These are the initial values for each animation that can be customized with the withInitialValues
modifier.
Name | Config |
---|---|
ZoomIn | {transform: [{ scale: 0 }]} |
ZoomInDown | {transform: [{ translateY: values.windowHeight }, { scale: 0 }]} |
ZoomInEasyDown | {transform: [{ translateY: values.targetHeight }, { scale: 0 }]} |
ZoomInEasyUp | {transform: [{ translateY: -values.targetHeight }, { scale: 0 }]} |
ZoomInLeft | {transform: [{ translateX: -values.windowWidth }, { scale: 0 }]} |
ZoomInRight | {transform: [{ translateX: values.windowWidth }, { scale: 0 }]} |
ZoomInRotate | {transform: [{ scale: 0 }, { rotate: rotate }]} |
ZoomInUp | {transform: [{ translateY: -values.windowHeight }, { scale: 0 }]} |
ZoomOut | {transform: [{ scale: 1 }]} |
ZoomOutDown | {transform: [{ translateY: 0 }, { scale: 1 }]} |
ZoomOutEasyDown | {transform: [{ translateY: 0 }, { scale: 1 }]} |
ZoomOutEasyUp | {transform: [{ translateY: 0 }, { scale: 1 }]} |
ZoomOutLeft | {transform: [{ translateX: 0 }, { scale: 1 }]} |
ZoomOutRight | {transform: [{ translateX: 0 }, { scale: 1 }]} |
ZoomOutRotate | {transform: [{ scale: 1 }, { rotate: '0' }]} |
ZoomOutUp | {transform: [{ translateY: 0 }, { scale: 1 }]} |
Modifiers
Time-based Optional
Time-based modifiers relay on withTiming
function.
ZoomOutLeft.duration(500).easing(Easing.ease);
.easing(easingFunction: EasingFunction)
is an easing function which defines the animation curve. Defaults toEasing.inOut(Easing.quad)
Time-based modifiers have no effect when .springify()
is used.
Spring-based Optional
Spring-based modifiers relay on withSpring
function.
ZoomInRotate.springify()
.damping(30)
.mass(5)
.stiffness(10)
.overshootClamping(false)
.restDisplacementThreshold(0.1)
.restSpeedThreshold(0.1);
.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 to10
..mass(value: number)
is the weight of the spring. Reducing this value makes the animation faster. Defaults to1
..stiffness(value: number)
decides how bouncy the spring is. Defaults to100
..overshootClamping(value: boolean)
decides whether a spring can bounce over the designated position. Defaults tofalse
..restDisplacementThreshold(value: number)
is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to0.001
..restSpeedThreshold(value: number)
is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to2
.
Common Optional
ZoomIn.delay(500)
.randomDelay()
.reduceMotion(ReduceMotion.Never)
.withInitialValues({ transform: [{ scale: 0.5 }] })
.withCallback((finished) => {
console.log(`finished without interruptions: ${finished}`);
});
.duration(durationMs: number)
is the length of the animation (in milliseconds). Defaults to300
..delay(durationMs: number)
is the delay before the animation starts (in milliseconds). Defaults to0
..randomDelay()
randomizes the delay of the animation between0
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: StyleProps)
allows to override the initial config of the animation..withCallback(callback: (finished: boolean) => void)
is the callback that will fire after the animation ends. Setsfinished
totrue
when animation ends without interruptions, andfalse
otherwise.
Platform compatibility
Android | iOS | Web |
---|---|---|
✅ | ✅ | ✅ |