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

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

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.

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