GestureUpDownWrapper.tsx

import React, { ReactNode } from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import {
  Gesture,
  GestureDetector,
  gestureHandlerRootHOC,
} from 'react-native-gesture-handler';
import Reanimated, {
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

type GestureUpDownWrapperProps = {
  className?: string;
  style?: StyleProp<ViewStyle>;
  callback?: () => {};
  onChangeTranslationY?: (translationY: number) => {};
  children: ReactNode;
};

const GestureUpDownWrapper = gestureHandlerRootHOC(
  ({
    style,
    callback,
    onChangeTranslationY,
    children,
  }: GestureUpDownWrapperProps) => {
    const position = useSharedValue(0);
    const animatedStyle = useAnimatedStyle(() => ({
      transform: [{ translateY: position.value }],
    }));
    const panGesture = Gesture.Pan()
      .failOffsetX([-2, 2])
      .activeOffsetX([-10, 10])
      .activeOffsetY([-10, 10])
      .onUpdate((e) => {
        position.value = e.translationY;

        runOnJS(onChangeTranslationY)(Math.abs(position.value));
      })
      .onEnd(() => {
        if (Math.abs(position.value) >= 200 && callback) {
          runOnJS(callback)();
          return;
        }
        position.value = withTiming(0);
        runOnJS(onChangeTranslationY)(0);
      });

    return (
      <GestureDetector gesture={panGesture}>
        <Reanimated.View style={[style, animatedStyle]}>
          {children}
        </Reanimated.View>
      </GestureDetector>
    );
  },
);

export default GestureUpDownWrapper;