Source: https://docs.expo.dev/versions/v53.0.0/sdk/view-pager

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 53

Archive Expo Snack Discord and Forums Newsletter

react-native-pager-view

GitHub npm

A component library that provides a carousel-like view to swipe through pages of content.

GitHub npm

Android

iOS

Bundled version:

6.7.1

Copy page

react-native-pager-view exposes a component that provides the layout and gestures to scroll between pages of content, like a carousel.

Installation

Terminal

Copy

- npx expo install react-native-pager-view

If you are installing this in an existing React Native app , make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

Example

App.js

Copy

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', }, });

Learn more

Visit official documentation

Get full information on API and its usage.