Pan Handler for react native gesture handler

GestureHandlerContainer.jsx

import React, {useRef} from 'react';
import {PanResponder} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';


export default GestureHandlerContainer = ({onRightSwipe = () =>{}, onLeftSwipe = () =>{},onUpSwipe = () =>{},onDownSwipe = () =>{},children}) => {
   
    const panResponder = useRef(
        PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onMoveShouldSetPanResponder: () => true,
            onPanResponderRelease: (event, gestureState) => {
                const x = gestureState.dx;
                const y = gestureState.dy;
                if (Math.abs(x) > Math.abs(y)) {
                    if (x >= 0) {
                        // console.log('swipe right');
                        onRightSwipe();
                    } else {
                        // console.log('swipe left');
                        onLeftSwipe();
                    }
                } else {
                    if (y >= 0) {
                        //  console.log('swipe down')
                        onDownSwipe();
                    } else {
                        // console.log('swipe up')
                        onUpSwipe();
                    }
                }
            },
        }),
    ).current;

    return (
        <GestureHandlerRootView style={{flex: 1}} {...panResponder.panHandlers}>
            {children}
        </GestureHandlerRootView>
    );
};