Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ViewPager nested in ScrollView can not scroll vertically

See original GitHub issue

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:

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

Reproducible sample code

Issue Analytics

State:
Created 4 years ago
Comments:20 (4 by maintainers)

Top GitHub Comments

10reactions

SmirnovM91commented, Apr 1, 2020

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

4reactions

0x01001commented, Jan 2, 2020

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 />

Top Results From Across the Web

Scrollview inside viewpager scroll vertical not working

Below is my code but its not working properly, want a viewpager with scrollview in all fragment. Scrolling of the scrollview is not...

Android : ViewPager inside a ScrollView does not scroll correclty

Android : ViewPager inside a ScrollView does not scroll correclty [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] ...

ScrollView - Android Developers

For vertical scrolling, consider NestedScrollView instead of scroll view which offers greater user interface flexibility and support for the material design ...

Support nested scrolling elements with the same scroll direction.

This vertical RecyclerView has two items/pages. The upper page is just a simple TextView. The lower page contains the nested RecyclerView. Both pages...

View Pager Not Scrolling In A Scrollview - ADocLib

You can enable vertical paging for a ViewPager2 element by setting ViewPager2 does not natively support nested scroll views in cases For example ......