Reanimated Drag and Drop

Reanimated is a powerful library, when it's used together with React Native Gesture Handler is much more powerful.

In this article, we are going to show how to drag and drop views.

Firstly, We need to import the necessary components and functions.

import { View, StyleSheet, SafeAreaView } from 'react-native';
import Animated, {
  useAnimatedGestureHandler,
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

As you can see  react-native-reanimated   has a hook called useAnimatedGestureHandler . it means we can use it together with react-native-gesture-handler package.

Now Let's go by reading through the code.

drag and drop - Snack

Try this project on your phone! Use Expo’s online editor to make changes and save your own copy.

Snack