GitHub
npm
react-native-pager-view
exposes a component that provides the layout and gestures to scroll between pages of content, like a carousel.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
npx expo install react-native-pager-view
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
See full documentation at callstack/react-native-pager-view.
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';
const MyPager = () => {
return (
<View style={{ flex: 1 }}>
<PagerView style={styles.viewPager} initialPage={0}>
<View style={styles.page} key="1">
<Text>First page</Text>
<Text>Swipe ➡️</Text>
</View>
<View style={styles.page} key="2">
<Text>Second page</Text>
</View>
<View style={styles.page} key="3">
<Text>Third page</Text>
</View>
</PagerView>
</View>
);
};
const styles = StyleSheet.create({
viewPager: {
flex: 1,
},
page: {
justifyContent: 'center',
alignItems: 'center',
},
});
export default MyPager;