Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android rendering children of View as separate pages #186

Closed
bitttttten opened this issue Jun 21, 2020 · 22 comments
Closed

Android rendering children of View as separate pages #186

bitttttten opened this issue Jun 21, 2020 · 22 comments

Comments

@bitttttten
Copy link

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.

WhatsApp Image 2020-06-21 at 15 05 35

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

Screenshot 2020-06-21 at 15 05 04

@troZee
Copy link
Member

troZee commented Jun 22, 2020

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
Copy link
Author

bitttttten commented Jun 24, 2020

Hey! Thanks for your suggestion. The screenshots above were from @react-native-community/viewpager@3.3.0, 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:

Screenshot 2020-06-24 at 17 35 00

Android demo code:

WhatsApp Image 2020-06-24 at 17 35 28

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

WhatsApp Image 2020-06-24 at 17 35 28 (1)

@malhotrachetan
Copy link

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
Copy link
Author

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

@Immortalin
Copy link

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

@bitttttten
Copy link
Author

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
Copy link

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

@Immortalin
Copy link

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

@taingmeng
Copy link

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
Copy link
Member

troZee commented Jul 17, 2020

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
Copy link

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.

@troZee troZee mentioned this issue Sep 29, 2020
@yodaheis
Copy link

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
Copy link

jalaliyev commented Jul 11, 2022

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
Copy link
Collaborator

@JalalAliyev which version are you using?

@andreialecu
Copy link
Collaborator

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.

@callstack callstack deleted a comment from jalaliyev Jul 11, 2022
@jalaliyev
Copy link

jalaliyev commented Jul 11, 2022

this is output of yarn why react-native-pager-view command:
yarn why v1.22.19
react-native-pager-view@5.1.9

@jalaliyev
Copy link

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

@andreialecu
Copy link
Collaborator

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

@princefishthrower
Copy link

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
Copy link

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

@princefishthrower
Copy link

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
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests