React-native: Nested scrollview is not working in react native android but working in ios ?

[prashanthmerugucs]

<ScrollView>  
    <View> <Text>Hello</Text> </View> 
    <View><Text>Hello</Text>  </View> 
    <View><Text>Hello</Text>  </View> 
    <View><Text>Hello</Text>  </View> 
    <View>       
        <ScrollView>
            <View> <Text>Hello</Text> </View>         
            <View><Text>Hello</Text>  </View>         
            <View><Text>Hello</Text>  </View>          
            <View><Text>Hello</Text>  </View>      
        </ScrollView> 
    </View> 
</ScrollView>

[foghina]

I think @andreicoman11 was looking into something similar.

[foghina]

Or was it @kmagiera? :)

[kmagiera]

Can you provide some more details on how it's "not working":
1) crashing app?
2) causing red box?
3) not rendering anything?
4) not scrolling?

[satya164]

@prashanthnani Any updates?

[mpretty-cyro]

Just my 2 cents - Android doesn't actually handle nested scroll views that well, have you tried testing the UI using native Android to see if the behaviour differs at all?

[satya164]

Closing since no response. Let's re-open if you're still having the issue.

[cuitianze]

a horizontal scrollview with nested vertical scrollview will crash the app.

Android version: 4.4.4 KTU84P (MI 3)

[minkesh]

I think @prashanthnani means to say it's not scrolling. Same issue with me too.

[dc198689]

I have same issue too, have any ways to solve ?

[divyekhanna]

Same issue here

[Rashhh]

Same issue here

[colin3dmax]

Same issue here

[ranjithnori]

@satya164 Hey Satya, any updates on this ? Facing the same issue on RN 0.37 (android).

[satya164]

No one is working on this AFAIK.

[ABleas]

In my case it occasionally works, but it's really difficult to get the child scroller to scroll. I am wondering how scrollers are done on Android, because I can't find any reference to NestedScrollView in RN source?

I have vertical scrollers inside a horizontal (paged) scrolling parent, which is pretty much how the Facebook app works on Android. So they are doing something to get that working smoothly. Any tips @satya164? :)

[chuyik]

I found out if a horizontal ScrollView is inside a vertical ScrollView, the horizontal one will become hard to swipe on Android.
What I mean is the swipe gesture is easily recognized as a scroll gesture, and it's hard for me to do something like a Carousel inside a ScrollView because I have to implement the gesture recognizer for this with a PanResponder to prevent being recognized as a vertically scroll gesture, which leads to a bad user experience.

[urnotzhaoll]

any solutions?

[rajsuvariya]

any updates?

[mikelambert]

Vertical inside vertical, or horizontal inside horizontal, is a native android problem, and there are a lot of hacky workarounds out there on stackoverflow of folks trying to fix it. I don't know much more about that.

As far having a vertical inside horizontal (or vice versa), this also appears to be a native Android problem. ScrollView children are dependent on the parent scrollview "passing" the touch event to the child. But the parent is basically configured with a certain mTouchSlop (which I can't find a way to override, even in native Java code), which causes it to absorb drags beyond that slop. Since the slop appears to be set low, it often prioritizes scrolling in the outer scrollview, and makes it difficult to scroll in the inner one.

No idea on a fix. In my case, I may need to revert back to using something like a react-native-viewpager (which handles the scroll thresholds itself in JS, and is roughly equivalent to the FlatList functionality I want). Though I recognize that only helps my specific use case, and probably won't help most of you.

[Rpeanut]

any updates?

[shukerullah]

any updates?

[boliveira]

Any updates? :)

[Cygnus2112]

Any updates?

[ashrithks]

https://gist.github.com/ashrithks/8d97f928d92643468a26e29c4d2dbb67

try the above ,
expo link:-
https://snack.expo.io/S11vIpHA-

hacky way

[light-fury]

@ashrithks
Your solutions is not working in TabNavigator.

I used KeyboardAwareScrollView(vertical) in TabNavigator and inside the vertical scrollview, there's a horizontal scrollview.

Gesture swiping horizontal only recognised with TabNavigator not with horizontal scrollview.

Any Idea?

thanks

[ashrithks]

@Sergeypt423
The above example is for vertical scroll views, with tab navigator, u have to handle the scroll responders, In your case u have tab , vertical and horizontal scroll views ,

[light-fury]

In my case, there is vertical scroll view and inside of it, there's horizontal scroll view.
I've tried your solution but I'm not sure how I can do it with responders.
Could you help me?

[light-fury]

Here's my source code
<KeyboardAwareScrollView resetScrollToCoords={{ x: 0, y: 0 }}>
        <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <View style={styles.cardContainer}>
              <ScrollView
                style={{
                  height: height(18) + 15,
                  paddingTop: 5,
                  paddingBottom: 10,
                  marginLeft: 15,
                  marginRight: 15,
                  paddingLeft: 5,
                  paddingRight: 5,
                }}
                horizontal
              >
                {props.contractImages.map((item, key) => {
                  return (
                    <View style={styles.pageView}>
                      <Image
                        style={{
                          width: width(33) - 23,
                          height: height(18),
                          overflow: 'hidden',
                          borderRadius: 5,
                        }}
                        source={{ uri: item.path }}
                        resizeMode="stretch"
                      />

                      <TouchableOpacity
                        style={{
                          position: 'absolute',
                          marginTop: height(18) - 25,
                          marginLeft: 5,
                          width: 20,
                          height: 20,
                        }}
                        onPress={() => props._deleteContractImage(key)}
                      >
                        <Image
                          source={images.trashIcon}
                          style={{ flex: 1, position: 'absolute' }}
                          resizeMode="contain"
                        />
                      </TouchableOpacity>
                    </View>
                  );
                })}
                <View style={styles.pageView}>
                  <TouchableOpacity
                    style={{ flex: 1, justifyContent: 'center' }}
                    onPress={_showContractsCopyScreen}
                  >
                    <Image
                      source={images.addTab}
                      style={{ width: 25, height: 25, alignSelf: 'center' }}
                      resizeMode="stretch"
                    />
                  </TouchableOpacity>
                </View>
              </ScrollView>
            </View>
            <View style={{ height: 10 }} />
          </View>
        </View>

      </KeyboardAwareScrollView>

[iksent]

https://snack.expo.io/S11vIpHA-

Solution works for me, thank you, ashrithks

react-native: "0.48.4"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[Elijen]

Stale bot is a nice way of reducing open issues count, but does it really help anybody? 🤬

[rajsuvariya]

No, it doesn't. There are several issues which are not being looked at and
then stale bot closes it due to inactivity and developers like me working
in solution based companies with tight deadlines suffers a lot.

--
Raj Suvariya
Android / React Native Developer
Kuliza Technologies, Bangalore
Medium : https://medium.com/@rajsuvariya
m: [phone]
https://www.facebook.com/profile.php?id=100006523120386
https://twitter.com/RAJ_SUVARIYA
https://www.linkedin.com/in/rajpatel039/

On Sun, Jan 14, 2018 at 9:06 PM, Petr Peller [e-mail]
wrote:

Stale bot is a nice way of reducing open issues count, but does it really
help anybody? 🤬

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/3303#issuecomment-357519832,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AME787309BZFCzQoGig1fPP_RyIgQg8Fks5tKh8FgaJpZM4GL-F6
.

[murthy474]

is there any solution for ScrollView

[AndrejGajdos]

+1

[kwes01]

is there any solution?

[santhosh77h]

is there any solution available?

[ddenisen]

https://github.com/cesardeazevedo/react-native-nested-scroll-view/