React-native: The ScrollView in Scrollview can not scroll on android

Created on 10 Sep 2016 · 28Comments · Source: facebook/react-native

Issue Description

The code struct is like below

  <ScrollView>
       <ScrollView>
          something...
       </ScrollView>
       ...
 </ScrollView>

The Inner scrollview would never catch any events and repsond to scroll inner, the outer scrollveiw catch all the scroll events

I seached from some issues but not work
https://github.com/facebook/react-native/issues/41

Also I set panRepsoner of innter srollview , not work.

Something else , It's ok on ios

Additional Information

React Native version: 0.31
Platform(s) (iOS, Android, or both?): [android]
Operating System (macOS, Linux, or Windows?): [mac]

Locked

Source

falltodis

👍6

Most helpful comment

componentWillMount(){
    this._panResponder = PanResponder.create({
      onMoveShouldSetResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderGrant: (e, gestureState) => {
        this.fScroll.setNativeProps({ scrollEnabled: false })
      },
      onPanResponderMove: () => {

      },
      onPanResponderTerminationRequest: () => true,
      onPanResponderRelease: () => {
        this.fScroll.setNativeProps({ scrollEnabled: true })
      },
    })
} 

<ScrollView ref={(e) => { this.fScroll = e }} >    
  <ScrollView 
    {...this._panResponder.panHandlers}
    onScrollEndDrag={() => this.fScroll.setNativeProps({ scrollEnabled: true })} >
  </ScrollView>
</ScrollView>

#1046

titianqx on 12 Apr 2018

👍4 ❤1 🎉1

All 28 comments

Duplicate of #1046 ?

RD1991 on 13 Sep 2016

@RD1991 I am not sure, in my case the children are scrollviews rather than views and only occur on android , however they may have something similarity

falltodis on 13 Sep 2016

May be someone from facebook can do a quick review about this.

RD1991 on 13 Sep 2016

Also related to #41

tioback on 21 Sep 2016

Hi folks, are you folks still experiencing this issue?

ericnakagawa on 10 Jan 2017

@falltodis I'm closing this issue since there hasn't been any activity on it in a couple months. If this issue still persists reopen and I'll track down someone to review.

ericnakagawa on 12 Jan 2017

👎4

@ericnakagawa Hey! I am running into this on Android. Here's what my code looks like:

<ScrollView style={{flex: 1}}>
  <View style={{flex: 1, width: SCREEN_WIDTH, marginTop: 20}}>
    <ScrollView
      style={{flex: 1}}
      horizontal
      showsHorizontalScrollIndicator={false}
    >
      {...content}
    </ScrollView>
  </View>
</ScrollView>

And it seems like the outer/parent ScrollView hijacks all the touches, and I am unable to scroll the child ScrollView.

Strangely, this is only an issue on Android. Works perfectly fine on iOS. Any help is appreciated. Thanks.

Monte9 on 6 Aug 2017

Any news on this issue? I'm experiencing the same problem with nested ScrollViews on Android, with roughly the same components as @Monte9's example code. iOS works fine.

Mark2xv on 21 Aug 2017

ardboer on 28 Dec 2017

MrFoxPro on 18 Jan 2018

johnfdhartman on 2 Feb 2018

yeshkarluk on 11 Feb 2018

Liruwei on 13 Mar 2018

cyclone747 on 16 Mar 2018

@ericnakagawa I think you should open this issue!

falltodis on 20 Mar 2018

👍1

i have this issue too. help please

cahyoadip on 21 Mar 2018

evgenitsn on 21 Mar 2018

wanbok on 27 Mar 2018

+1 facing the same problem

ios-dev-newbie on 27 Mar 2018

Metroxe on 5 Apr 2018

titianqx on 12 Apr 2018

componentWillMount(){
    this._panResponder = PanResponder.create({
      onMoveShouldSetResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderGrant: (e, gestureState) => {
        this.fScroll.setNativeProps({ scrollEnabled: false })
      },
      onPanResponderMove: () => {

      },
      onPanResponderTerminationRequest: () => true,
      onPanResponderRelease: () => {
        this.fScroll.setNativeProps({ scrollEnabled: true })
      },
    })
} 

<ScrollView ref={(e) => { this.fScroll = e }} >    
  <ScrollView 
    {...this._panResponder.panHandlers}
    onScrollEndDrag={() => this.fScroll.setNativeProps({ scrollEnabled: true })} >
  </ScrollView>
</ScrollView>

#1046

titianqx on 12 Apr 2018

👍4 ❤1 🎉1

im also have this problem in android ! please help me

HamidReazaNikoonia on 23 May 2018

optimize version

componentWillMount(){
    this._panResponder = PanResponder.create({
      onMoveShouldSetResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: (evt,gestureState) => {
        return Math.abs(gestureState.dy) > 2 ;  // can adjust this num
      },
      onPanResponderGrant: (e, gestureState) => {
        this.fScroll.setNativeProps({ scrollEnabled: false })
      },
      onPanResponderMove: () => { },
      onPanResponderTerminationRequest: () => true,
    })
} 

<ScrollView ref={(e) => { this.fScroll = e }} >    
  <ScrollView 
    {...this._panResponder.panHandlers}
    onScrollEndDrag={() => this.fScroll.setNativeProps({ scrollEnabled: true })} >
  </ScrollView>
</ScrollView>

#1046

titianqx on 7 Jun 2018

@titianqx with this solution sometimes callback with "scrollEnabled: true" not calling
when you a little bit touching sub scroll area