PanGestureHandler not working in react native

Question

I'm trying to implement a BottomSheet with the code below, even though it's sliding up and down on button click but is not draggable

import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native- gesture-handler';
import React from 'react';
import {Sheet} from './styles';
import { useAnimatedGestureHandler, useSharedValue } from 'react-native-reanimated';
import { useWindowDimensions } from 'react-native';

export const SheetContainer = (props: any) => {
const {style, } = props;

const children = React.Children.map(props.children, c =>
  React.cloneElement(c, {
    slideCallback: '',
  }),
);

const { height: deviceHeight, width: deviceWidth } = useWindowDimensions();
const top = useSharedValue(deviceHeight);

const gestureHandler = useAnimatedGestureHandler<any>({
  onStart(_, context: any) {
    context.startTop = top.value;
  },
  onActive(event, context: any) {
    top.value = context.startTop + event.translationY;
  },
  onEnd() {
    if (top.value > deviceHeight / 4) {
      top.value = deviceHeight;
    } else {
      top.value = deviceHeight - 190;
    }
  },
})
return (
   <PanGestureHandler onGestureEvent={gestureHandler}>
    <Sheet {...props} style={style}>{children}</Sheet>
   </PanGestureHandler>
 );
};

The bottomsheet is not draggable Typescript underlines 'PanGestureHandler' tag above with red and the following message:

(alias) const PanGestureHandler: React.ComponentType<PanGestureHandlerProps & React.RefAttributes> import PanGestureHandler Type '{ children: Element; onGestureEvent: OnGestureEvent; }' is not assignable to type 'IntrinsicAttributes & PanGestureHandlerProps & RefAttributes'. Property 'children' does not exist on type 'IntrinsicAttributes & PanGestureHandlerProps & RefAttributes'.

What am missing here please

PanGestureHandler not working in react native

0 Answers0