search

cesardeazevedo / react-native-nested-scroll-view

react-native wrapper for android NestedScrollView
MIT License
88 stars 36 forks source link

doesn't work for nested scrollviews #34

Open sagark1510 opened 5 years ago

sagark1510 commented 5 years ago 
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

cesardeazevedo commented 5 years ago

Hi, do you have any gif showing what you are trying to do? i am not sure if i understood correctly.

sagark1510 commented 5 years ago

on ios it works perfect like below...

nestedscrollios

but on android it doesn't for example...

nestedscrollandroid

cesardeazevedo commented 5 years ago

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.

sagark1510 commented 5 years ago

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

cesardeazevedo commented 5 years ago

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.

sagark1510 commented 5 years ago

@cesardeazevedo okay. so what do you suggest to achieve the same behavior in android?