react-native-pager-view

GitHub

npm

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

Android

iOS

Bundled version:

6.7.0

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

Installation

Terminal

- 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

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 offical documentation

Get full information on API and its usage.