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. In order to use a debugger with your app with react-native-reanimated, you will need to use the Hermes JavaScript engine and the JavaScript Inspector for Hermes.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install react-native-reanimated
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'], }; };
expo start --clear
.Note: If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated'; import { View, Button } from 'react-native'; import React from 'react'; export default function AnimatedStyleUpdateExample(props) { 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={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'column', }}> <Animated.View style={[{ width: 100, height: 80, backgroundColor: 'black', margin: 30 }, style]} /> <Button title="toggle" onPress={() => { randomWidth.value = Math.random() * 350; }} /> </View> ); }