ViewPager Not Rendering

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]

Could you use below styles for viewPager style ?

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

ViewPager has some problems with flex: 1 value.

[mkurczewski]

Still no readme update, I lost my time on following the official examples that are just not working…