'Guest scrollView when I scrolled to top

I write custom bottom sheet and inside PanGestureHandler I have ScrollView. Guest not work if I have scrollable content, but with scrollEnable={false} everything work. So, how I can trigger PanGestureHandler if I scrolled to top?

I try to write bottom audio banner like in Spotify or Youtube. You can open full media screen and swipe to bottom to open small audio banner

const { height, width } = Dimensions.get('window');
const TABBAR_HEIGHT = 100;
const MINIMIZED_PLAYER_HEIGHT = 130;
const SNAP_TOP = 0;
const SNAP_BOTTOM = height - TABBAR_HEIGHT - MINIMIZED_PLAYER_HEIGHT;
const snapPointsY = [SNAP_TOP, SNAP_BOTTOM];
const SpringConfig = {
  damping: 15,
  mass: 1,
  stiffness: 150,
  overshootClamping: false,
  restSpeedThreshold: 0.1,
  restDisplacementThreshold: 0.1,
};

export const BottomTabs = (props: BottomTabBarProps<BottomTabBarOptions>) => {
  const { currentPosition } = useTypedSelector(item => item.playlist);
  const translateY = useSharedValue(height);

  const onGestureEvent = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { x: number; y: number }>({
    onStart: (_, ctx) => {
      // dont allow drag start if we're done editing
      ctx.x = translateY.value;
    },
    onActive: ({ translationY }, ctx) => {
      // dont allow drag if we're done editing
      const traY = ctx.x + translationY;

      if (traY > SNAP_TOP) {
        translateY.value = traY;
      }
    },
    onFinish: ({ translationY, velocityY }) => {
      if (translateY.value > SNAP_BOTTOM + 20) {
        translateY.value = withSpring(height, SpringConfig);
      } else {
        const snapPointX = snapPoint(translationY, velocityY, snapPointsY);

        translateY.value = withSpring(snapPointX, SpringConfig);
      }
    },
  });



  return (
    <>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Animated.View style={[styles.playerSheet, bannerStyle]}>
          <VideoPlayerScreen  />
          <Animated.View
            style={[
              {
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                width: '100%',
                height: 200,
              },
              playerMiniStyle,
            ]}
          >
            <AudioPlayer />
          </Animated.View>
        </Animated.View>
      </PanGestureHandler>
      <Animated.View style={[{ height: TABBAR_HEIGHT }, tabStyle]}>
        <BottomTabBar {...props} />
      </Animated.View>
    </>
  );
};

component



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source