Reanimated2 & React-Native-Guesture-Handler Example. Drag and Drop of a credit card and snapping to either the top or the bottom.

gistfile1.js

import Animated, { onGestureEvent, useSharedValue, withTiming, withDecay, withSpring, useAnimatedStyle, interpolate, Easing, Extrapolate, interpolateColor, useAnimatedGestureHandler } from "react-native-reanimated";
import { PanGestureHandler } from 'react-native-gesture-handler';
import { Dimensions, StyleSheet, View } from "react-native";
import React, { useEffect, useRef } from "react";
import { useCreditCard } from "./Hooks/useCreditCard";
import { Card } from './Shared/Card';

const { width, height } = Dimensions.get('window');

export default function FirstLook(props) {

  const translateX = useSharedValue(100);
  const translateY = useSharedValue(100);

  const card = useCreditCard();

  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      ctx.offsetX = translateX.value;
      ctx.offsetY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.offsetX + event.translationX;
      translateY.value = ctx.offsetY + event.translationY;
    },
    onEnd: (event, ctx) => {
      const { absoluteX, absoluteY, velocityX, velocityY } = event;
      const destination = absoluteY > height / 2 ? 450 : 100;

      translateX.value = withSpring(100);
      translateY.value = withSpring(destination);
    }
  })

  const style = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value }
      ]
    }
  })

  return (
    <View styles={{ flex: 1 }}>
      <View style={{ position: 'absolute', height: height / 2, width: '100%', borderBottomWidth: 1, borderBottomColor: '#E2E8F0', backgroundColor: '#F7FAFC', }} />
      <PanGestureHandler {...{onGestureEvent}}>
        <Animated.View {...{style}}>
          <Card card={card} />
        </Animated.View>
      </PanGestureHandler>
    </View>
  );

}