react-native-nested-scroll-view
react-native-nested-scroll-view copied to clipboard
cesardeazevedo
doesn't work for nested scrollviews
import React, {Component} from 'react';
import {Text, View, ScrollView, Dimensions} from 'react-native';
import NestedScrollView from 'react-native-nested-scroll-view';
export default class Test extends Component {
render() {
return (
<View style={{flex: 1}}>
<NestedScrollView horizontal>
<View style={{width: Dimensions.get('window').width}}>
<NestedScrollView>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<NestedScrollView horizontal style={{paddingVertical: 50}}>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
</NestedScrollView>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
<Text> textInComponent </Text>
</NestedScrollView>
</View>
</NestedScrollView>
</View>
);
}
}
horizontal scrollview than vertical scrollview than again horizontal scrollview. first horizontal scrollview will be paginated and can have more than one vertical scrollview which I can swipe left or right... can this library solve this issue? above example is not working as expected
Hi, do you have any gif showing what you are trying to do? i am not sure if i understood correctly.
on ios it works perfect like below...
but on android it doesn't for example...
I got it, but as you probably know, this library doesn't work on iOS, and uses the main ScrollView on ios, so i am not really sure if my library suits your needs.
Have you tried to combine regular ScrollView and NestedScrollView together in different ways? I will give a try in a couple days.
@cesardeazevedo I think you miss understood my question. iOS behavior is fine. I want the same behavior in android.
Horizontal scroll -> vertical scroll -> horizontal scroll. it's working on ios but not on android.
I completely understood your question, i am just not sure if you understood the purposed of this library, i am saying that nested scrolls on iOS is a completely different mechanism from android, and my library is not trying to make what iOS does, so you can't expect that something working on iOS will work on android by using this library.
I can't guarantee any compatibility with iOS with a library designed for android only.
@cesardeazevedo okay. so what do you suggest to achieve the same behavior in android?