React-native-pager-view: ViewPager nested in ScrollView can not scroll vertically

Created on 17 Dec 2019  路  20Comments  路  Source: callstack/react-native-pager-view

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

picture KingAmo

Most helpful comment

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

picture SmirnovM91 on 1 Apr 2020
👍6

All 20 comments

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

KingAmo picture KingAmo on 19 Dec 2019

Obviously, the width/height depends on the wrapper.

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

devvit picture devvit on 20 Dec 2019

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 />
0x01001 picture 0x01001 on 28 Dec 2019
👍3

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.

avent08 picture avent08 on 29 Jan 2020
👍3

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

Kasemyassine2 picture Kasemyassine2 on 7 Feb 2020

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

troZee picture troZee on 7 Feb 2020

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

avent08 picture avent08 on 10 Feb 2020

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"
troZee picture troZee on 10 Feb 2020

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

avent08 picture avent08 on 10 Feb 2020

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

SmirnovM91 picture SmirnovM91 on 1 Apr 2020
👍6

Any temporary fix for this issue at least! :(

hsivakum picture hsivakum on 12 Apr 2020

No solutions yet?

dhavaljardosh picture dhavaljardosh on 6 May 2020

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

kunalsolanki1992 picture kunalsolanki1992 on 30 Jul 2020

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.

Relax594 picture Relax594 on 11 Aug 2020

any solutions?

huurray picture huurray on 13 Oct 2020

did you find any solutions to fix that?

olkunmustafa picture olkunmustafa on 29 Nov 2020

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

Relax594 picture Relax594 on 29 Nov 2020

@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

tcorreiaubi picture tcorreiaubi on 9 Dec 2020

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

arekkubaczkowski picture arekkubaczkowski on 13 Jan 2021

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

Doko-Demo-Doa picture Doko-Demo-Doa on 13 May 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

orcunorcun picture orcunorcun  路  9Comments
KingAmo picture KingAmo  路  4Comments
panda0603 picture panda0603  路  5Comments
supermaverickws picture supermaverickws  路  8Comments
ferrannp picture ferrannp  路  4Comments