React Native Viewpager | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

View Pager allows an user to flip left and right or up and down through pages

@react-native-community/viewpager provides a ViewPager component for this purpose

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcViewPager)

react-native init NcViewPager

This creates a directory named NcViewPager and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here NcViewPager)

cd NcViewPager

Add @react-native-community/viewpager package to current project using yarn

yarn add @react-native-community/viewpager

or using npm

npm install @react-native-community/viewpager --save

iOS

After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

<ViewPager style={styles.viewPager} initialPage={0} showPageIndicator={true}>
    <View><Text>page1</Text></View>
    <View><Text>page2</Text></View>
</ViewPager>

Prop	Description	Platform
`initialPage`	Index of initial page that should be selected	both
`scrollEnabled: boolean`	Should viewpager scroll, when scroll enabled	both
`onPageScroll: (e: PageScrollEvent) => void`	Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages)	both
`onPageScrollStateChanged: (e: PageScrollStateChangedEvent) => void`	Function called when the page scrolling state has changed	both
`onPageSelected: (e: PageSelectedEvent) => void`	callback to be be called once the ViewPager finishes navigating to the selected page	both
`pageMargin: number`	Blank space to be shown between pages	both
`keyboardDismissMode: ('none' / 'on-drag')`	Determines whether the keyboard gets dismissed in response to a drag	both
`orientation: Orientation`	Set `horizontal` or `vertical` scrolling orientation (it does not work dynamically)	both
`transitionStyle: TransitionStyle`	Use `scroll` or `curl` to change transition style (it does not work dynamically)	iOS
`showPageIndicator: boolean`	Shows the dots indicator at the bottom of the view	iOS

Above table is taken from github page of the package

App Code

Following App.js code implements ViewPager

Each child component of ViewPager is implemented as a page

App.js

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ViewPager from '@react-native-community/viewpager';


const AppViewPager = () => {
  return (
    <ViewPager style={styles.viewPager} initialPage={0} showPageIndicator={true}>
      <View
        style={{
          backgroundColor: '#C70039',
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{ color: 'white', fontSize: 30 }}>Page One</Text>
      </View>
      <View
        style={{
          backgroundColor: '#FF5733',
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{ color: 'white', fontSize: 30 }}>Page Two</Text>
      </View>
      <View
        style={{
          backgroundColor: '#FFC300',
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{ color: 'white', fontSize: 30 }}>Page Three</Text>
      </View>
      <View
        style={{
          backgroundColor: '#DAC300',
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{ color: 'white', fontSize: 30 }}>Page Four</Text>
      </View>
    </ViewPager>
  );
};


export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: 30 }}>
        <AppViewPager/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewPager: {
    flex: 1,
  },
});

Run instructions

Running in Android

cd into project directory (here NcViewPager)

cd NcViewPager

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here NcViewPager)

cd NcViewPager

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work

React Native View Pager