React Native nested ScrollView locking up

Question

I\'m trying to nest ScrollViews in React Native; a horizontal scroll with nested vertical scrolls.

Here\'s an example:

var Test = React.createClass({
           


        

Answer 1

In your panresponder for the inner one, try setting this:

onPanResponderTerminationRequest: () => false

Answer 2

Wrapping scrollable content of nested ScrollView with fixed this one for me on android:

<ScrollView>
  ...
  <ScrollView horizontal>
    <TouchableWithoutFeedback>
      { /* your scrollable content goes here */ }
    </TouchableWithoutFeedback>
  </ScrollView>
</ScrollView>

Answer 3

@IlyaDoroshin and @David Nathan's answer pointed me in the right direction but I had to wrap each item in the scrollview with a touchable, rather than one touchable for everything.

<ScrollView>
  ...
  <ScrollView horizontal>
    {items.map(item => (
        <TouchableWithoutFeedback>
          { /* your scrollable content goes here */ }
        </TouchableWithoutFeedback>
    ))}
  </ScrollView>
</ScrollView>

Answer 4

If you are working with RN > 56.0, just add this prop to your scroll views:

<ScrollView nestedScrollEnabled = {true}>
 ......
  <ScrollView nestedScrollEnabled = {true}>
    .....
  </ScrollView>
</ScrollView>

That's the only one worked for me.

Answer 5

Modify node_modules/react-native/Libraries/Components/ScrollResponder.js: Line 136 (See UPDATE):

scrollResponderHandleScrollShouldSetResponder: function(): boolean {
    return this.state.isTouching;
},

UPDATE: I find if the scroll view is currently animating and wants to become the responder, then it will reject. Line 189 in ScrollResponder.js. So I modify Line 340 and it work for me:

scrollResponderIsAnimating: function(): boolean {
  // var now = Date.now();
  // var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
  // var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
  //   this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
  // return isAnimating;
    return false;
},

You can see here: https://github.com/facebook/react-native/issues/41