ViewPager child height is doubled in ScrollView

Bug

First of all, thank you for this great package.

ViewPager child’s height is doubled (or so) when ViewPager is embedded inside a ScrollView. This affects the dynamic content’s UI I am fetching from my API (e.g. I receive content of 300px height and the ViewPager scales to ~600px).

I don’t know if this is a bug or normal behaviour, but I do want to know how to work around this issue without any marginBottom: -100% non-reliable code.

Here is a sample video from my app. Although, another interesting thing is that it doesn’t double on first render, because I present an <ActivityIndicator> while the content is downloaded, but it overextends just as I scroll to another page:

Environment info

react-native info output:

System:
    OS: macOS 10.15.4
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      Android NDK: 21.0.6113669
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.0 => 16.13.0 
    react-native: ^0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 3.3.0

Steps To Reproduce

1. Embed ViewPager (flex: 1) in ScrollView.
2. Add View (check its height with e.g. 'backgroundColor: ‘red’`) with content that is bigger in size than the ViewPager (e.g. bigger than the screen).
3. Scroll to next page and see that the ViewPager increased in height way beyond its initial height is extended.

Describe what you expected to happen:

1. The children to not be stretched or to be stretched only as big as the ViewPager (not to overflow its height).

Reproducible sample code

import ViewPager from '@react-native-community/viewpager'
import React from 'react'
import { ScrollView, View } from 'react-native'

const CHILD_HEIGHT = 300

const ViewPagerHeightBug = (): JSX.Element => (
  <ScrollView>
    <ViewPager style={{ flex: 1, marginLeft: 16, marginRight: 16 }}>
      {Array.from(Array(2)).map((item, index) => (
        <View key={index.toString()} style={{ backgroundColor: 'red' }}>
          <View
            style={{
              backgroundColor: 'green',
              width: '100%',
              height: CHILD_HEIGHT,
            }}
          />
        </View>
      ))}
    </ViewPager>
  </ScrollView>
)

export default ViewPagerHeightBug

As you can see in this example, whatever the CHILD_HEIGHT we set, the ViewPager somehow doubles.

[gremech]

You can wrap a component with React.Fragment instead of removing childrenWithOverriddenStyle

import React, { Fragment } from 'react';

<ViewPager>
  <Fragment>
    <PageComponent />
  </Fragment>
</ViewPager>

upd: make sure you pass collapsable={false} for the root PageComponent View

[teo029]

Will be back with a response in around one week, but, for sure, I forked the project (some time ago) just to remove that line and saw the same problem. Will confirm later on, thank you.