React-native-pager-view: ViewPager Not Rendering

[yashspr]

Bug report

Summary

ViewPager is not getting rendered on the screen. Tried the code sample on this repo's README but nothing is rendered on the screen but the text views i added. Tried applying height to the ViewPager but nothing changed.

The library is being used in an expo project.

Environment info

react-native info output:

System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Memory: 6.54 GB / 15.91 GB
  Binaries:
    Node: 12.16.0 - ~\AppData\Local\Temp\yarn--1595620445087-0.5604080445455797\node.CMD
    Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1595620445087-0.5604080445455797\yarn.CMD
    npm: 6.14.2 - ~\AppData\Roaming\npm\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 9.0.4 - C:\Program Files\Java\jdk-9.0.4\bin\javac.EXE
    Python: 3.8.0 - D:\Applications\Python38-32\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: ~16.11.0 => 16.11.0
    react-native: https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found
Done in 4.30s.

Library version: 4.1.1

Also tried with version 3.3 which got installed by running expo install @react-native-community/viewpager. Since that didn't work, then tried with v4.1.1

Tested the app on an Android device running Android version 9 through the Expo Client App.

Steps to reproduce

1. Create a new component from the code below
2. Use that component in App.tsx

Describe what you expected to happen:

1. ViewPager is not being rendered
2. The text Begin and End appear one below the other without the ViewPager being rendered in between the text views.

Reproducible sample code

import React from 'react';
import { View, Text, StyleSheet, SafeAreaView, StatusBar } from 'react-native';
import ViewPager from '@react-native-community/viewpager';

export const WelcomeScreen = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text>Begin</Text>

            <ViewPager style={styles.viewPager} initialPage={0}>
                <View style={{ height: 200 }} key="1">
                    <Text>First page</Text>
                </View>
                <View key="2">
                    <Text>Second page</Text>
                </View>
            </ViewPager>

            <Text>End</Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        marginTop: StatusBar.currentHeight ? StatusBar.currentHeight : 0,
    },
    viewPager: {
        flex: 1,
        height: 500,
    },
});

Screenshot

[troZee]

Can you set collapsable prop to false like below:

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

and check the result ?

[yashspr]

I set the collapsable property to false on each of children in the ViewPager but that didn't change the output. It's still the same as the attached screenshot.

[troZee]

Could you use below styles for viewPager style ?

    viewPager: {
        width: "100%",
        height:"100%",
    },

ViewPager has some problems with flex: 1 value.

[yashspr]

Thank you! It works properly now.
I don't know how common this issue is but i feel it would be better if this was mentioned in the README.

[troZee]

Thank you! It works properly now.
I don't know how common this issue is but i feel it would be better if this was mentioned in the README.

Good point. I have limited amount of time due private circumstances. I will try to add this as known issue.
You can also do that, so feel free to make a PR and in case of any questions, please let me know :D