how to stop scrolling after a point

[johnneuland]

Description

I am using react native gesture handlers to create a bar that can be scrolled up and down. Currently I can scroll it as much as I want. I want to modify it such that it should stop scrolling when I certain limit has reached.

In onHandleStateChange, I can get values of event.nativeEvent such as:

absoluteX: 237
absoluteY: 348.5
handlerTag: 109
numberOfPointers: 0
oldState: 4
state: 5
target: 5235
translationX: 7
translationY: 200.5
velocityX: 0
velocityY: 0
x: 237
y: 84.84616088867188

I want to use an if else condition in the code such that I can set limits after which point the scrolling stops. But I am not sure how to do that since the scrolling happens from the onGestureEvent. How can I correctly modify that function?

I thought of adding checks in here but if I change it like this, it no longer works:

const onGestureEvent = () => {
   Animated.event([{ nativeEvent: { translationY: dragY.current } }], {
     useNativeDriver: true,
   });
 };

Code

export const SwipeablePanel: React.FunctionalComponent = () => {
  //set up animation variables
  const dragY = useRef(new Animated.Value(0));

  const onGestureEvent = Animated.event(
    [{ nativeEvent: { translationY: dragY.current } }],
    {
      useNativeDriver: true,
    },
  );

  const onHandleStateChange = (event: any) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
       dragY.current.extractOffset();
    }
    console.log('EVENT', event.nativeEvent)

  };
  const animateInterpolation = dragY.current.interpolate({
    inputRange: [-(SCREEN_HEIGHT * 2) / 3, 0],
    outputRange: [moderateScale(80) - (SCREEN_HEIGHT * 2) / 3, 0],
    extrapolate: 'clamp',
  });

  const animatedStyles = {
    transform: [
      {
        translateY: animateInterpolation,
      },
    ],
  };

  const whitelistBarMarginInterpolation = dragY.current.interpolate({
    inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 3, 0],
    outputRange: [0, moderateScale(150)],
    extrapolate: 'clamp',
  });

  const whitelistBarStyles = {
    transform: [
      {
        translateY: whitelistBarMarginInterpolation,
      },
    ],
  };

  return (
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandleStateChange}
      activeOffsetX={[-1000, 1000]}
      activeOffsetY={[-10, 10]}
      >
      <Animated.View
        style={[
          styles.container,
          animatedStyles
        ]}>
        <ScrollBar />
  );
};

Snack Expo : https://snack.expo.io/@nhammad/insane-pizza I tried to reproduce it but here I can't scroll at it. I am using the same code in my app and it scrolls over there.

Package versions

• React Native: "react-native": "0.63.1",
• React Native Gesture Handler: "react-native-gesture-handler": "^1.6.1",