A library that provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
GitHub
npm
This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.
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.
-
npx expo install react-native-reanimated
If you are installing this in an existing React Native app, start by installing expo
in your project. Then, follow the additional instructions provided by the library's README or documentation.
No additional configuration is required. Reanimated Babel plugin is automatically configured in babel-preset-expo
when you install the library.
The following example shows how to use the react-native-reanimated
library to create a simple animation. For more information on the API and its usage, see react-native-reanimated
documentation.
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,
},
});