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({
    render: function() {
        return (
            <ScrollView
                style={{width:320, height:568}}
                horizontal={true}
                pagingEnabled={true}>

                {times(3, (i) => {
                    return (
                        <View style={{width:320, height:568}}>

                            <ScrollView>
                                {times(20, (j) => {
                                    return (
                                        <View style={{width:320, height:100, backgroundColor:randomColor()}}/>
                                    );
                                })}
                            </ScrollView>

                        </View>
                    );
                })}

            </ScrollView>
        );
    },
});

AppRegistry.registerComponent('MyApp', () => Test);

The outer scroller works flawlessly, but the inner one sticks when you touch it while it's moving. What I mean is: if you scroll, lift your finger and touch it again while it's still moving with momentum, it stops and doesn't react at all to touch moves. To scroll more you have to lift your finger and touch again.

This is so reproducible it feels like something to do with the Gesture Responder.

Has anyone seen this issue?

How would I even begin to debug this? Is there a way to see what's responding to touches, granting and releasing, and when?

Thanks.

Update:

It looks like it is the responder system, by putting onResponderMove listeners on the inner and outer scrollers:

<ScrollView 
    onResponderMove={()=>{console.log('outer responding');}}
    ...

    <ScrollView
        onResponderMove={()=>{console.log('inner responding');}}>
        ...

It's clear that the outer ScrollView is grabbing control. The question, I guess, is how do I stop the outer scroller from taking control when trying to scroll vertically? And why is this only happening when you try to scroll an already moving inner ScrollView?

Do you see this behaviour in the simulator too? It's not immediately clear what you're trying to do here, practically speaking - maybe there's a simpler method. — Colin Ramsay, May 02 '15 at 13:59
Yes. Happening in the simulator as well. A good example of what I'm looking for is Gilt. You can scroll vertically through products, and horizontally through categories. Another one is Netflix, though reversed as they have multiple horizontal scrolls inside a vertical one. — nicholas, May 03 '15 at 17:44
Did you find a solution to this? I don't want to modify the core code. — TYRONEMICHAEL, May 20 '15 at 14:24
After a little investigating, you can have a function that returns true on the outer Scrollview that responds to the following event onStartShouldSetResponder. So if onStartShouldSetResponder is set to true, the inner Scrollview will not respond to events. So we need to figure out if the user is swiping horizontally and if the user is swiping horizontally on the onStartShouldSetResponder, have the function return true otherwise return false. I am just wondering how to get the gesture on onStartShouldSetResponder. — TYRONEMICHAEL, May 20 '15 at 16:13

score 76 · Answer 1 · answered Nov 03 '19 at 00:13

76

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.

answered Nov 03 '19 at 00:13

Adam

3,815
29
24

2

Nested scroll is the default for iOS. https://reactnative.dev/docs/scrollview#nestedscrollenabled – nextt1 Mar 17 '20 at 21:38
3

I can't believe how simple this solution is, or that I only found it here. Anyway, this is amazing thank you so much!! – Geoff Davids May 04 '20 at 11:38
Holy shit. I just spend around 2 hours looking through posts, this is amazing thank you so much. – n0rd Aug 19 '20 at 10:20
1

It's really simple it's crazy. Thank you so much it worrked – Valian Masdani Sep 18 '20 at 09:48
2

In this case, if I scroll the inner one, then the outer one also scrolled. Is there a solution for that? – JollyRoger Feb 19 '21 at 09:17
https://reactnative.dev/docs/scrollview#nestedscrollenabled-androidin RN 0.64 `nestedScrollEnabled` is `true` by default: – Ulrik H. Kold Mar 19 '21 at 13:35

score 9 · Answer 2 · answered Sep 17 '15 at 19:19

9

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

onPanResponderTerminationRequest: () => false

answered Sep 17 '15 at 19:19

Josh Baker

598
7
16

1

I'm getting this error message: "Warning: ScrollView doesn't take rejection well - scrolls anyway" . The ScrollView seems to have special privileges where it doesn't have to listen. Is there another option? – faceyspacey.com Mar 18 '16 at 12:30
1

what is a panresponder and where do we put that line of code?? – Ren Jan 10 '19 at 16:10
@Yokhen Did you figure out how to set this and where? I am facing the same problem. – Aayush Sep 20 '19 at 19:52

score 9 · Answer 3 · answered Jun 22 '18 at 22:08

9

@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>

answered Jun 22 '18 at 22:08

zdixon

339
4
10

Thank you. This is the only solution that worked for me. I tried all of the above ones. I have been looking for a solution like this for hours. – Jingjie Zhan Jul 23 '18 at 07:00

score 8 · Answer 4 · edited Mar 02 '18 at 12:42

8

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>

edited Mar 02 '18 at 12:42

David Schumann

13,380
9
75
96

answered Jan 19 '17 at 23:09

IlyaDoroshin

4,659
4
22
26

1

did not help to me :( using RN 0.40 – ColCh Feb 06 '17 at 09:32
on RN 0.46, still useful. I also had to wrap my inner content with a view, since TWF only takes single components. – Julian K Sep 20 '17 at 19:03
1

Very nice! Works perfectly! – Benjamin Heinke Apr 19 '18 at 18:12
Any ideas on how to get this working with a nested webview? It seems to behave like a scrollview. – mike james Jan 09 '19 at 21:21
Absolutely, this is working, I can confirm – Miroslav Maksimovic Oct 07 '21 at 11:37

score 5 · Answer 5 · edited Mar 02 '18 at 12:20

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

This works like a charm for me!!!!!!! Thank you very much!!! you are my life saver!!! — Dicky Tsang, Jan 10 '16 at 06:19

React Native nested ScrollView locking up

5 Answers5

Linked