react-native-reanimated
provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations. From the project's README:It provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions.
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.
⏩If you want to play with v2-alpha in a new project before adding it to an existing project, runnpx crna --template with-reanimated2
to create a project with it configured and ready to use.
experiments.turboModules
key to your app.json
:{ "expo": { "experiments": { "turboModules": true } } }
expo install
because we still default to installing the stable react-native-reanimated v1.# This exact version is supported: npm install react-native-reanimated@2.0.0-alpha.6.1
babel.config.js
:module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'], }; };
Some of your project's dependencies are not compatible with currently installed expo package version: - react-native-reanimated - expected version range: ~1.13.0 - actual version installed: 2.0.0-alpha.6.1
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import Animated, { Easing } from 'react-native-reanimated'; const { Value, timing } = Animated; export default class Example extends React.Component { constructor(props) { super(props); this._transX = new Value(0); this._config = { duration: 5000, toValue: 180, easing: Easing.inOut(Easing.ease), }; this._anim = timing(this._transX, this._config); } render() { return ( <View style={styles.container}> <Animated.View style={[styles.box, { transform: [{ translateX: this._transX }] }]} /> <Button onPress={() => { this._anim.start(); }} title="Start" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', padding: 8, }, box: { width: 50, height: 50, backgroundColor: 'purple', borderRadius: 5, }, });