snappable-reanimated-2.js

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

function Snappable() {
  const dragStartX = useSharedValue(0);
  const translateX = useSharedValue(0);

  const boxStyle = useAnimatedStyle(
    context => {
      return {
        transform: [{ translateX: context.translateX }],
      };
    },
    { translateX }
  );

  const gestureHandlers = useGestureHandlerWorkletEvents(
    {
      onStart: (event, context) => (context.dragStartX = context.translateX),
      onActive: (event, context) =>
        (context.translateX = context.dragStartX + event.translationX),
      onEnd: (event, context) => {
        const snapPoint =
          context.translateX + event.velocityX * 0.2 < 0 ? -100 : 100;
        context.translateX = withSpring(snapPoint);
      },
    },
    { translateX, dragStartX }
  );

  return (
    <PanGestureHandler maxPointers={1} minDist={10} handlers={gestureHandlers}>
      <Animated.View style={boxStyle}>{children}</Animated.View>
    </PanGestureHandler>
  );
}

function Example() {
  return (
    <View style={styles.container}>
      <Snappable>
        <View style={styles.box} />
      </Snappable>
    </View>
  );
}

const BOX_SIZE = 100;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: BOX_SIZE,
    height: BOX_SIZE,
    borderColor: '#F5FCFF',
    alignSelf: 'center',
    backgroundColor: 'plum',
    margin: BOX_SIZE / 2,
  },
});