https://github.com/race604/react-native-viewpager

[Deprecated] ViewPager component for React Native
https://github.com/race604/react-native-viewpager

Last synced: 7 days ago
JSON representation

[Deprecated] ViewPager component for React Native

• Host: GitHub
• URL: https://github.com/race604/react-native-viewpager
• Owner: race604
• Created: 2015-10-10T09:10:39.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2022-07-19T07:20:18.000Z (over 2 years ago)
• Last Synced: 2024-11-29T09:12:53.958Z (14 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.76 MB
• Stars: 1,408
• Watchers: 48
• Forks: 373
• Open Issues: 107
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-viewpager ★1350 - ViewPager component for React Native (Components / UI)
• awesome-react-native - react-native-viewpager ★1350 - ViewPager component for React Native (Components / UI)
• awesome-reactnative-ui - react-native-viewpager - native-viewpager/master/./art/anim.gif)| (Others)
• awesome-react-native - react-native-viewpager ★1350 - ViewPager component for React Native (Components / UI)
• awesome-reactnative-ui - react-native-viewpager - native-viewpager/master/./art/anim.gif)| (Others)
• awesome-react-native - react-native-viewpager
• awesome-react-native - react-native-viewpager ★1350 - ViewPager component for React Native (Components / UI)
• ReactNativeMaterials - react-native-viewpager
• awesome-react-native-ui - react-native-viewpager ★868 - ViewPager component for React Native (Components / UI)

README

        
# react-native-viewpager

[![npm version](https://img.shields.io/npm/v/react-native-viewpager.svg?style=flat-square)](https://www.npmjs.com/package/react-native-viewpager)

[![npm downloads](https://img.shields.io/npm/dm/react-native-viewpager.svg?style=flat-square)](https://www.npmjs.com/package/react-native-viewpager)

> @Deprecated This repo is no more maintenance.

This is the `ViewPager` componnent in React Native both for Android and iOS.

This is a JavaScript-only implementation of pager for React Native. Like `ListView`,

this can render hundreds of pages without performance issue. Better than the one in

Android, this `ViewPager` can **auto play** -- turn page automaticly, **loop** -- make infinite scrolling.

## Demo

![](./art/demo.jpg)

![](./art/anim.gif)

Demo project is [here](./Sample).

## Usage

1. Run `npm install react-native-viewpager --save`

2. Code like this:

```

var ViewPager = require('react-native-viewpager');

```

## More configuration

* **`dataSource`**: this is require to provide pages data,

* **`renderPage`**: this is require to render page view,

* **`autoPlay`**: `true` to turn page automatically,

* **`initialPage`**: to set the index of the first page to load,

* **`isLoop`**: `true` to run in infinite scroll mode,

* **`locked`**: `true` to disable touch scroll,

* **`onChangePage`**: page change callback,

* **`renderPageIndicator`**: render custom ViewPager indicator.

* **`initialPage`**: show initially some other page than first page.

## Page Transition Animation Controls

* **`animation`**: function that returns a React Native Animated configuration.

Example:

```

var ViewPager = require('react-native-viewpager');

 {

    // Use the horizontal velocity of the swipe gesture

    // to affect the length of the transition so the faster you swipe

    // the faster the pages will transition

    var velocity = Math.abs(gestureState.vx);

    var baseDuration = 300;

    var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;

    return Animated.timing(animatedValue,

    {

      toValue: toValue,

      duration: duration,

      easing: Easing.out(Easing.exp)

    });

  }}

/>

```

## Licensed

MIT License