stop dragging after a limit has reached

Question

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.

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 />
  );
};

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.

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,
    });
  };

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.

Answer 1

Try ScrollView, It has prop called scrollEnabled. By help of this prop you can turn to false when you don't want user to be able to scroll any more. When false, the view cannot be scrolled via touch interaction.

Here is documentation: https://facebook.github.io/react-native/docs/scrollview.html#scrollenabled

ScrollView also has onScroll so it should be easy to implement the logic here.