vue.js logo

React native


Step 1: Install Dependencies

First, you need to install the required libraries:


npm install react-native-reanimated react-native-gesture-handler

or

yarn add react-native-reanimated react-native-gesture-handler


Step 2: Additional Setup

For `react-native-reanimated` and `react-native-gesture-handler` to work properly, some additional setup is required.


Android

Edit android/app/src/main/java/com/yourapp/MainActivity.java to use ReactActivityDelegateWrapper:



                import com.facebook.react.ReactActivity;
  import com.facebook.react.ReactActivityDelegate;
  import com.facebook.react.ReactRootView;
  import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

  public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
      return "yourapp";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
      return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
          return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
      };
    }
  }

iOS

In your `AppDelegate.m`, add the following lines:



          #import 
  #import 
  #import 

  ...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:@"yourapp"
                                              initialProperties:nil];

    ...
  }

Step 3: Example Usage


Now, you can create a simple animation using `react-native-reanimated`.


App.js



          import React from 'react';
  import { StyleSheet, View, Button } from 'react-native';
  import Animated, { Easing, useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

  const App = () => {
    const animationValue = useSharedValue(0);

    const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{ translateY: animationValue.value }],
      };
    });

    const startAnimation = () => {
      animationValue.value = withTiming(200, {
        duration: 1000,
        easing: Easing.inOut(Easing.ease),
      });
    };

    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} />
        <Button title="Start Animation" onPress={startAnimation} />
      </View>
    );
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    box: {
      width: 100,
      height: 100,
      backgroundColor: '#61dafb',
    },
  });

  export default App;

Explanation


useSharedValue:This hook creates a shared value that can be used in animations.

useAnimatedStyle:This hook creates an animated style object. The transformation is based on the shared value.

withTiming:This function creates a timing animation. It takes the end value and an optional configuration object.

Easing:This is used to specify the easing function for the animation.