Android rendering children of View as separate pages

[bitttttten]

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]

I see expo uses 3.3.0 version, which is the most stable.

You have not passed styles to ViewPager, so maybe this is an issue ?

[bitttttten]

Hey! Thanks for your suggestion. The screenshots above were from @react-native-community/[email protected], and were also on Expo 37.

It's also not working when adding flex: 1 styles onto ViewPager just like the README. I can reproduce this with the demo code from the README on a bare expo app, so I am guessing there might be an issue with linking?

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

export const MyPager = () => {
	return (
		<ViewPager style={styles.viewPager} initialPage={0}>
			<View key="1">
				<Text>First page a</Text>
				<Text>First page b</Text>
				<Text>First page c</Text>
			</View>
			<View key="2">
				<Text>Second page a</Text>
				<Text>Second page b</Text>
				<Text>Second page c</Text>
			</View>
		</ViewPager>
	)
}

const styles = StyleSheet.create({
	viewPager: {
		flex: 1,
		marginTop: 200,
	},
})

iOS Demo code:

Android demo code:

and a screenshot of scrolling half way through to show they are one page each:

[malhotrachetan]

Hey! Same issue for me too. Only occurs on Android while works completely fine on ios. Any fixes? style={{flex:1}} doesn't fix anything. @bitttttten were you able to figure out?

[bitttttten]

@debuggermalhotra I haven't figured it out yet. I am still looking into alternatives..

[Immortalin]

@bitttttten is this exclusive to Expo? Can you replicate the problem on React Native without Expo?

[bitttttten]

I only have ever used Expo with RN, but I did create a bare Expo app and could reproduce this issue in there too. I don't actually know how to make an RN without Expo yet.

[Immortalin]

Give it a try without Expo and let me know if you can reproduce. It might be Expo related.

[Immortalin]

@bitttttten I found a workaround. Just wrap the child View in another View and key the external View

[taingmeng]

Adding collapsable={false} to each child view seems to fix the issue. It's used in the example code:

https://github.com/react-native-community/react-native-viewpager/blob/master/example/ViewPagerExample.js#L112

[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.

[ramonvermeulen]

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.

I agree with this. Actually the way I found a solution to this problem was by looking through the issues with this library and luckily I found this post.

Would be nice if the Viewpager could have a property for this which is default to true, which basically dynamically adds collapsable true to all child views.

[yodaheis]

Facing multiple pages rendered for children within the page on Android as well.

expo: 39.0.3
problem exists in these versions that I have checked so far: 4.1.6 as well as 3.3.1

[jalaliyev]

Hey! I faced same issue on android.

           ref={(ref) => (pagerViewRef = ref)}
           style={{flex: 1}}
           initialPage={0}
           scrollEnabled={true}
           showPageIndicator={false}
           onPageSelected={(e) => {
             console.log('e.nativeEvent.position>>>', e.nativeEvent.position);
             setCurrentPageNumber(e.nativeEvent.position);
             setTitle(headerText[e.nativeEvent.position]);
           }}>
           <View
             key="0"
             style={{width: '100%', height: '100%'}}
             collapsable={false}>
             <View
               style={{width: '100%', height: '100%', backgroundColor: 'red'}}
             />
           </View>
           <View
             key="1"
             style={{width: '100%', height: '100%'}}
             collapsable={false}>
             <View
               style={{
                 width: '100%',
                 height: '100%',
                 backgroundColor: 'green',
               }}
             />
           </View>
           <View
             key="2"
             style={{width: '100%', height: '100%'}}
             collapsable={false}>
             <View
               style={{
                 width: '100%',
                 height: '100%',
                 backgroundColor: 'orange',
               }}
             />
           </View>
         </PagerView>```
This is my screenshoot

![Screenshot_1657526297](https://user-images.githubusercontent.com/68613787/178217264-60f3c8ee-5312-4450-a9ff-dfcf81fc6c11.png)



how can I fix that issue?

[andreialecu]

@JalalAliyev which version are you using?

[andreialecu]

That's only a version range. Run yarn why react-native-pager-view or npm list react-native-pager-view depending on which package manager you use.

[jalaliyev]

this is output of yarn why react-native-pager-view command:
yarn why v1.22.19
[email protected]

[jalaliyev]

@andreialecu Was I able to answer your question in detail?

[andreialecu]

Yes, and the first problem is that you're running an old version, update to the latest.

[princefishthrower]

I'm seeing this now on iOS: incomplete transitions between pages resulting in half pages being shown. The README is unclear, is {flex: 1} forbidden for any child View within a PagerView, or just the root child of each page?

[princefishthrower]

Also I'm getting page jumps to previous pages when the keyboard opens - is there a known resolution to this?

[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.

[BoavistaLudwig]

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.

Hej, can you pls explain how you switched to basic screens? I am not sure how to replicate it. Thanks!