This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 53).
A library that provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
react-native-reanimated
provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore. To use a debugger with your app with
react-native-reanimated
, you'll need to use the Hermes JavaScript engine and the JavaScript Inspector for Hermes.
Installation
-
npx expo install react-native-reanimated react-native-worklets
No additional configuration is required. Reanimated Babel plugin is automatically configured in babel-preset-expo
when you install the library.
Usage
The following example shows how to use the react-native-reanimated
library to create a simple animation.
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated'; import { View, Button, StyleSheet } from 'react-native'; export default function AnimatedStyleUpdateExample() { const randomWidth = useSharedValue(10); const config = { duration: 500, easing: Easing.bezier(0.5, 0.01, 0, 1), }; const style = useAnimatedStyle(() => { return { width: withTiming(randomWidth.value, config), }; }); return ( <View style={styles.container}> <Animated.View style={[styles.box, style]} /> <Button title="toggle" onPress={() => { randomWidth.value = Math.random() * 350; }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, box: { width: 100, height: 80, backgroundColor: 'black', margin: 30, }, });
Learn more
Get full information on API and its usage.