A component library that provides a carousel-like view to swipe through pages of content.
GitHub
npm
This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.
react-native-pager-view
exposes a component that provides the layout and gestures to scroll between pages of content, like a carousel.
-
npx expo install react-native-pager-view
If you are installing this in an existing React Native app, start by installing expo
in your project. Then, follow the additional instructions provided by the library's README or documentation.
See full documentation at callstack/react-native-pager-view.
import { StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';
export default function MyPager() {
return (
<View style={styles.container}>
<PagerView style={styles.container} 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({
container: {
flex: 1,
},
page: {
justifyContent: 'center',
alignItems: 'center',
},
});