search

callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.58k stars 401 forks source link

ViewPager nested in ScrollView can not scroll vertically #132

Closed KingAmo closed 2 years ago

KingAmo commented 4 years ago

Bug

when a ViewPager is the children of a ScrollView, ScrollView 's height is always screen height and can not scroll vertical any more

Environment info

React native info output:

 System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 688.18 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 21, 23, 26, 27, 28
      Build Tools: 23.0.1, 26.0.1, 28.0.3, 29.0.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Library version: 3.3.0

Steps To Reproduce

            <ScrollView
                contentContainerStyle={{ flex: 1 }}
                style={{ flex: 1 }}
            >
                <View style={{ height: 200, backgroundColor: 'orange' }} />
                <ViewPager style={{ flex: 1 }} initialPage={0}>
                    <View key="1" style={{ backgroundColor: 'red', height: 1000 }} />
                    <View key="2" style={{ backgroundColor: 'green', height: 1000 }} />
                </ViewPager>

            </ScrollView>

Describe what you expected to happen:

  1. the ScrollView's height is larger then screen hight, so you can scroll vertical
  2. the height of ViewPager is 1000 that i set.

Reproducible sample code

KingAmo commented 4 years ago

horizontal ViewPager's max height is screen height ? am i right?

devvit commented 4 years ago

Obviously, the width/height depends on the wrapper.

In practice, you may need to control nested scroll(through scrollEnabled) manually.

0x01001 commented 4 years ago

same issue can't scroll vertical inside ViewPager with scrollEnabled = true

rowRenderer = (type, data, index) => {
   return (
      <ViewPager ref={this.viewPager} style={styles.page} initialPage={1} orientation="horizontal" scrollEnabled onPageSelected={this.onPageSelected}>
        <View key="1">
          <Text>First page</Text>
        </View>
        <ScrollView key="2" style={{ flex: 1 }}>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page</Text>
          <Text>Second page end</Text>
        </ScrollView>
        <View key="3">
          <Text>Three page</Text>
        </View>
      </ViewPager>
    );
};

<RecyclerListView style={styles.container} layoutProvider={this.layoutProvider} dataProvider={this.dataProvider} rowRenderer={this.rowRenderer} forceNonDeterministicRendering />
avent08 commented 4 years ago

I also have experienced same issue with @0x01001 (https://github.com/react-native-community/react-native-viewpager/issues/132#issuecomment-569385223), my flat list won't scroll even I make the flatlist height static. and it happen only android, in IOS everything works fine.

Kasemyassine2 commented 4 years ago

did any find a solution to this issue ? managed in from the native side?

troZee commented 4 years ago

I checked both cases and work fine. Please provide reproduction repository.

avent08 commented 4 years ago

this is the demo https://github.com/avent08/RNViewPagerBug the viewpager using orientation="vertical"

troZee commented 4 years ago

Hey @avent08 . Thank you very much for repository. I had a chance to easily reproduce it. This issue exist on Android but it will be fixed by https://github.com/react-native-community/react-native-viewpager/pull/139/files

If you want to check out new version, please use below command: 

yarn add  @react-native-community/react-native-viewpager@https://github.com/react-native-community/react-native-viewpager.git#@troZee/viewpager2

or change in package.json

"@react-native-community/viewpager": "https://github.com/react-native-community/react-native-viewpager.git#@troZee/viewpager2"
avent08 commented 4 years ago

thank you very much @troZee. cant wait until it fully released. will try those code on my repository.

SmirnovM91 commented 4 years ago

If FlatList is inside ViewPager, the FlatList's scrolling is not working, any ideas how to fix it?

hsivakum commented 4 years ago

Any temporary fix for this issue at least! :(

dhavaljardosh commented 4 years ago

No solutions yet?

kunalsolanki1992 commented 3 years ago

Hey @avent08 . Thank you very much for repository. I had a chance to easily reproduce it. This issue exist on Android but it will be fixed by https://github.com/react-native-community/react-native-viewpager/pull/139/files

If you want to check out new version, please use below command:

yarn add  @react-native-community/react-native-viewpager@https://github.com/react-native-community/react-native-viewpager.git#@troZee/viewpager2

or change in package.json

"@react-native-community/viewpager": "https://github.com/react-native-community/react-native-viewpager.git#@troZee/viewpager2"

Using this is not changing anything ..

I am trying to use viewpager in horizontal orientation inside vertical carousel, it works in iOS perfectly whereas on android viewpager can't be scrolled

Relax594 commented 3 years ago

If FlatList is inside ViewPager, the FlatList's scrolling is not working, any ideas how to fix it?

same issue here. 3.3.0 is working fine but upgrading to 4.x breaks it.

huurray commented 3 years ago

any solutions?

olkunmustafa commented 3 years ago

did you find any solutions to fix that?

Relax594 commented 3 years ago

I've upgraded to the latest version 4.x and it's working again.

tcorreiaubi commented 3 years ago

@Relax594 can you please point out what version you are using and show a basic snippet of the code? I'm still facing the same issue as stated on the issue

arekkubaczkowski commented 3 years ago

Bug

when a ViewPager is the children of a ScrollView, ScrollView 's height is always screen height and can not scroll vertical any more

Environment info

React native info output:

 System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 688.18 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 21, 23, 26, 27, 28
      Build Tools: 23.0.1, 26.0.1, 28.0.3, 29.0.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Library version: 3.3.0

Steps To Reproduce

            <ScrollView
                contentContainerStyle={{ flex: 1 }}
                style={{ flex: 1 }}
            >
                <View style={{ height: 200, backgroundColor: 'orange' }} />
                <ViewPager style={{ flex: 1 }} initialPage={0}>
                    <View key="1" style={{ backgroundColor: 'red', height: 1000 }} />
                    <View key="2" style={{ backgroundColor: 'green', height: 1000 }} />
                </ViewPager>

            </ScrollView>

Describe what you expected to happen:

  1. the ScrollView's height is larger then screen hight, so you can scroll vertical
  2. the height of ViewPager is 1000 that i set.

Reproducible sample code

Your issue is strict related to wrong styling, when you have two children of ScrollView and the first item has height=200 and the second one flex: 1 then it will always adjust itself to the screen height.

Beside that any other issues which may be related with it should be fixed in 5.x version

Doko-Demo-Doa commented 3 years ago

For me, I tried to set paddingHorizontal: 0 or paddingVertical: 0 (whatever the value is), and it worked.