ScrollView nested within a PanGestureHandler

[dutzi]

I'd like to have a ScrollView within a PanGestureHandler where the ScrollView is scrollable but whenever scrollY <= 0 (and its not a momentum scroll) the PanGestureHandler should handle the gesture.

It's kind of hard to explain, so here is a video: https://streamable.com/hplw6

How could this be achieved?

[origamih]

This is my implementation:

• Having an enable state, set it to false when ScrollView offset <= 0
• Make ScrollView wait for PanGesture, but this leads to the problem that when PanGesture is being dragged up (change to failed state) ScrollView still waits for it. So I have ScrollView wait for another one when enable = false, (for itself in this case)
  The downside is it needs to listen to ScrollView onScroll event to track scroll offset

import React from "react";
import { PanGestureHandler, State, ScrollView } from 'react-native-gesture-handler';

class Example extends React.Component {
  ref = React.createRef();
  scrollRef = React.createRef();
  state = {
    enable: true
  };
  _onScrollDown = (event) => {
    if (!this.state.enable) return;
    const {translationY} = event.nativeEvent;
    // handle PanGesture event here
  };

  _onScroll = ({nativeEvent}) => {
    if (nativeEvent.contentOffset.y <= 0 && !this.state.enable) {
      this.setState({enable: true });
    }
    if (nativeEvent.contentOffset.y > 0 && this.state.enable) {
      this.setState({enable: false});
    }
  };

  render () {
    const { enable } = this.state;
    return (
      <ScrollView
        ref={this.scrollRef}
        waitFor={enable ? this.ref : this.scrollRef}
        scrollEventThrottle={40}
        onScroll={this._onScroll}
      >
        <PanGestureHandler
          enabled={enable}
          ref={this.ref}
          activeOffsetY={5}
          failOffsetY={-5}
          onGestureEvent={this._onScrollDown}
        >
          
        </PanGestureHandler>
      </ScrollView>
    );
  }
}

[hssrrw]

I am trying to achieve the same effect as in the video above. Controlling enabled prop is too slow, because requires component update. It would be better if the feature would be implemented on the native side using PanGestureHandler.

Judging by the amount of apps with this kind of bottom panels with scrollable content, I'd say it's quite a popular case. Maybe the lib already allows to implement that somehow. Would really appreciate any feedback from the library authors.

[pribeh]

Using scrollview/flatlist from the gesture library permits this to work well on iOS but doesn't seem to work in Android. @hssrrw is correct that controlling enabled is too slow and the pangesturehandler responds to quick before its disabled. If we could define a region within a pangesturehandler that won't respond that could work in many if not most use cases.

I achieved this in another way by using interpolate and transform on an outer view to track the pangesturehandler transY position. Then only wrap the upper region above the scrollview with the pangesturehandler.

I've switched to using the interactable object now and I can't quite grasp how to achieve the same just yet but I'll work on it.

[pribeh]

I know this isn't ideal for everyone but this should cover various use cases. I've modified the render output of Interactable.js to something like this:

  render() {
    return (
      <Animated.View style={[
        this.props.style,
        {
          transform: [
            {
              translateX: this.props.verticalOnly ? 0 : this._transX,
              translateY: this.props.horizontalOnly ? 0 : this._transY,
            },
          ],
        },
      ]}>
        <PanGestureHandler
          maxPointers={1}
          enabled={this.props.dragEnabled}
          onGestureEvent={this._onGestureEvent}
          onHandlerStateChange={this._onGestureEvent}
        >
          <Animated.View>
            {this.props.header}
          </Animated.View>
        </PanGestureHandler>
        <Animated.View>
          {this.props.body}
        </Animated.View>
      </Animated.View>
    );
  }

The above is just an inversion of the pangesturehandler and the transforming view with the body separated out of the pangesturehandler. The idea is that you take the header section of your draggable object, which includes the handler bar, and insert it as your this.props.header and the rest of the contents, including scrollview, likewise into this.props.body of your component like so:

<Interactable.View
    header={this.renderHeader}
    body={this.renderBody}
    verticalOnly={true}
    style={[ styles.interactableContainer ]}
    snapPoints={[ { y:  this.topSnap }, { y: this.bottomSnap }, ]}
    boundaries={{ top: this.topSnap }}
    initialPosition={{ y: this.bottomSnap }}
    animatedValueY={this._deltaY} />

This way, you can still have as large an area to let the user drag your object up or down but the pangesturehandler won't interfere with the user's scrolling of the contents of that object. The only disadvantage is that the user can't drag the object up or down directly in the scrollview area. In many use cases, like ours, this is exactly what you don't want to happen so this works.

Tested on both Android and iOS and works great.

[Noitidart]

I'm also stuck on Android. I have a PanGestureHandler which has a descendent which is a ScrollView, but I cannot scroll in this ScrollView, the pan always is taking precedence. I even created a ref and passed it deeply down and then did:

<PanGestureHandler waitFor={ref}>
    ....
    <ScrollView ref={ref} />
    ....
</PanGestureHandler>

I'm on Android, using RN 0.59.5.

[jmacindoe]

Take a look at the bottom sheet example, it seems to be what you want https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/bottomSheet/index.js

The behaviour is also implemented by this library https://github.com/osdnk/react-native-reanimated-bottom-sheet

Although the bottom sheet example seemed a bit buggy when I tested it (jumped around if you scrolled it up and down really fast) and reanimated-bottom-sheet doesn't support nesting a ScrollView. The nested view will scroll, but it has to be a plain View without its own scrolling behaviour.

[PierreCapo]

am trying to achieve the same effect as in the video above. Controlling enabled prop is too slow, because requires component update. It would be better if the feature would be implemented on the native side using PanGestureHandler.

Judging by the amount of apps with this kind of bottom panels with scrollable content, I'd say it's quite a popular case. Maybe the lib already allows to implement that somehow. Would really appreciate any feedback from the library authors.

I totally agree with @hssrrw , I think there are really common usecases where you want to toggle a gesture handler and right now you need to come back to the JavaScript thread to do that. And even by doing that, I have to admit it was really buggy when I needed to do a setState while doing a gesture. Moreover, because of those setState I've needed to use use-memo-one or move to class components to memoize all the animated values.

[pkf1994]

I'm also stuck on Android. I have a PanGestureHandler which has a descendent which is a ScrollView, but I cannot scroll in this ScrollView, the pan always is taking precedence. I even created a ref and passed it deeply down and then did:

<PanGestureHandler waitFor={ref}>
    ....
    <ScrollView ref={ref} />
    ....
</PanGestureHandler>

I'm on Android, using RN 0.59.5.

Did you fix it ? same issue on android

[Fantasim]

Any update about this case ?

[pribeh]

Our results are confusing. On a Samsung S9 and S10, the scrollview from RN works. But on all other phones we tested including Pixel, scrollview from Gesture Handler works. The S9 doesn't work with scrollview when imported from Gesture Handler though.

[mayconmesquita]

@pribeh i got similar results.