Android rendering children of View as separate pages

Summary

On Android, all children of children elements get rendered onto their own pages.

Environment info

info Fetching system and libraries information...
System:
    OS: macOS 10.15.5
    CPU: (16) x64 AMD Ryzen 7 1700X Eight-Core Processor         
    Memory: 166.43 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4

Library version: Expo 37.0.0

Steps to reproduce

import ViewPager from "@react-native-community/viewpager"
import React from "react"
import { View, Text } from "react-native"

export const MyComponent = () => {
    return (
        <ViewPager initialPage={0}>
            <View key="1">
                <Text>First page a</Text>
                <Text>First page b</Text>
            </View>
            <View key="2">
                <Text>Second page a</Text>
                <Text>Second page b</Text>
            </View>
        </ViewPager>
    )
}

Renders incorrectly on Android. I have 4 screens here that I can swipe through, but I expect only 2 screens with text underneath.

Renders correctly on iOS, with the Text being underneath each other.

[troZee]

https://reactnative.dev/docs/view.html#collapsable

Views that are only used to layout their children or otherwise don’t draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

@taingmeng you are right. Maybe we should consider to add this property by default.

[princefishthrower]

I didn’t have time to fight this but just to let anybody who reads this know, I switched to just basic screens with react-navigation and this half / incomplete navigation issue between screens went away.