Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zbtang/React-Native-ViewPager
ViewPager and Indicator component for react-native on both android and ios.
https://github.com/zbtang/React-Native-ViewPager
react-native viewpager
Last synced: about 2 months ago
JSON representation
ViewPager and Indicator component for react-native on both android and ios.
- Host: GitHub
- URL: https://github.com/zbtang/React-Native-ViewPager
- Owner: zbtang
- Created: 2016-03-28T09:37:19.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-03-08T02:33:24.000Z (almost 3 years ago)
- Last Synced: 2024-11-19T21:05:32.040Z (2 months ago)
- Topics: react-native, viewpager
- Language: JavaScript
- Homepage:
- Size: 4.62 MB
- Stars: 950
- Watchers: 21
- Forks: 276
- Open Issues: 108
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Native-ViewPager
[](https://npmjs.org/package/rn-viewpager) [](https://npmjs.org/package/rn-viewpager) [](https://npmjs.org/package/rn-viewpager)
ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content).
## Features
- unify \ and \ to \, add offer same props as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content).
- \ component support render indicator
- implement common indicator: DotIndicator, TitleIndicator and TabIndicator
## Preview
[download demo apk file](http://fir.im/md2u)
## Build and run the demo
```
cd RNViewPagerDemo/
npm install
react-native run-ios
```
## Component API
[`` Component API](docs/viewpager.md)
[`` Component API](docs/indicatorviewpager.md)
[`` Component API](docs/dotindicator.md)
[`` Component API](docs/tabindicator.md)
[`` Component API](docs/titleindicator.md)
## Usage
### Install from npm:
`npm install --save rn-viewpager`
### Integrate into your app:
```jsx
import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
export default class ViewPagerPage extends Component {
render() {
return (
page one
page two
page three
page one
page two
page three
page one
page two
page three
);
}
_renderTitleIndicator() {
return ;
}
_renderDotIndicator() {
return ;
}
_renderTabIndicator() {
let tabs = [{
text: 'Home',
iconSource: require('../imgs/ic_tab_home_normal.png'),
selectedIconSource: require('../imgs/ic_tab_home_click.png')
},{
text: 'Message',
iconSource: require('../imgs/ic_tab_task_normal.png'),
selectedIconSource: require('../imgs/ic_tab_task_click.png')
},{
text: 'Profile',
iconSource: require('../imgs/ic_tab_my_normal.png'),
selectedIconSource: require('../imgs/ic_tab_my_click.png')
}];
return ;
}
}
```
## Note
When use this lib in ListView header on android platform, please add `removeClippedSubviews={false}` prop to your ListView.