1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3import PagerView from 'react-native-pager-view';
4
5export default function PagerViewScreen() {
6  return (
7    <PagerView
8      style={styles.container}
9      initialPage={0}
10      onPageSelected={(_) => {
11        console.log('New page!');
12      }}>
13      <View key="1" style={styles.page}>
14        <Text style={styles.text}>First page</Text>
15        <Text style={styles.description}>Swipe this to scroll to the next page</Text>
16      </View>
17      <View key="2" style={styles.page}>
18        <Text style={styles.text}>Second page</Text>
19        <Text style={styles.description}>Swipe this to scroll back</Text>
20      </View>
21    </PagerView>
22  );
23}
24
25PagerViewScreen.navigationOptions = {
26  title: 'PagerView Example',
27  gesturesEnabled: false,
28};
29
30const styles = StyleSheet.create({
31  container: {
32    flex: 1,
33  },
34  page: {
35    flex: 1,
36    backgroundColor: '#fff',
37    alignItems: 'center',
38    justifyContent: 'center',
39  },
40  text: {
41    fontSize: 20,
42    fontWeight: 'bold',
43  },
44  description: {
45    fontSize: 16,
46    color: '#888',
47  },
48});
49