Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meinto/react-native-viewpager-carousel
a flexible viewpager library with carousel functionality
https://github.com/meinto/react-native-viewpager-carousel
android carousel ios pager-component react-native rondell swipe swipeview tabbar tabs viewpager
Last synced: 2 months ago
JSON representation
a flexible viewpager library with carousel functionality
- Host: GitHub
- URL: https://github.com/meinto/react-native-viewpager-carousel
- Owner: meinto
- License: mit
- Created: 2017-04-25T18:08:00.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:16:19.000Z (about 2 years ago)
- Last Synced: 2024-04-25T13:40:48.296Z (10 months ago)
- Topics: android, carousel, ios, pager-component, react-native, rondell, swipe, swipeview, tabbar, tabs, viewpager
- Language: JavaScript
- Homepage:
- Size: 1.74 MB
- Stars: 39
- Watchers: 3
- Forks: 17
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Viewpager Carousel
[](https://badge.fury.io/js/react-native-viewpager-carousel)
[](https://david-dm.org/meinto/react-native-viewpager-carousel)
[](https://david-dm.org/meinto/react-native-viewpager-carousel?type=dev)
[](https://www.npmjs.com/package/react-native-viewpager-carousel)
[](https://www.npmjs.com/package/react-native-viewpager-carousel)
[](https://travis-ci.org/meinto/react-native-viewpager-carousel)
## Contribution
Feel free to make a pull request. I'm happy about every contribution.
## Examples
You can find example implementations for all use cases of this library in the repo [react-native-viewpager-carousel-example-app](https://github.com/meinto/react-native-viewpager-carousel-example-app). The example project is also linked as git submodule in this project.
## Installation
```
yarn add react-native-viewpager-carousel
```
or
```
npm install --save react-native-viewpager-carousel
```
## Preview
## ViewPager
The `````` is the base component of the library. Till now it acts like a simple view-carousel:
```javascript
import { ViewPager } from 'react-native-viewpager-carousel'
class ExampleCarousel extends PureComponent {
constructor() {
this.data = [
{ title: 'title 1' },
{ title: 'title 2' },
{ title: 'title 3' },
]
}
_renderPage = ({data}) => {
return ( {item.title} )
}
render() {
return (
)
}
}
```
### API
| prop name | data type | default | functionality |
| --------------------- | --------- | ------- | ------------- |
| containerStyle | style | {} | the component is wrapped into a ``````. Styles to this `````` can be assigned through this property |
| contentContainerStyle | style | {} | posibility to set styles to the content container (the entire scrollable area) |
| data | array | [] | a data array of objects |
| dev | boolean | false | draws a black line around the pages and tabs for debugging |
| lazyrender | boolean | false | lazyrender renders the active page only when its in the viewport |
| lazyrenderThreshold | number | 1 | determines how many threshold left and right the current visible page sould be rendered if lazyrender={true} |
| renderAsCarousel | boolean | true | renders the as endless carousel |
| thresholdPages | number | 1 | number of pages left and right of the scrollable content (sneak preview) |
| pageWidth | number | {{screen width of device}} | width of page |
| initialPage | object | {} | key value pair of initial page: e. g. data=[{key:'page-a'}, {key:'page-b'}] & initialPage={{key:'page-b}} |
| scrollEnabled | boolean | true | decleares wether the ViewPager should be able to scroll by user or not |
| firePageChangeIfPassedScreenCenter | boolean | false | toggle's if onPageChange sould already be called when the dragged page passed half of the screen |
| pagingEnabled | boolean | true | |
| experimentalMirroring | boolean | false | toggles the mirroring of the scrollposition of the threshold views - more information [here](https://github.com/meinto/react-native-mirror) |
| showNativeScrollIndicator | boolean | false | native ScrollView indicator is disabled by default |
| renderPage | function | () => {} | render callback for content page |
| onPageChange | function | () => {} | callback when the page changes -> retuns the current pageNumber as first argument |
| onScroll | function | () => {} | callback when the content area scrolls |
## TabbedPager
In addition to the `````` the `````` component provides an additional renderFunction for Tabs above the content view. The following pseudo-code shows the basic usage with an `````` as content and a `````` as tab.
```javascript
import { TabbedPager } from 'react-native-viewpager-carousel'
class ExampleCarousel extends PureComponent {
constructor() {
this.data = [
{ title: 'title 1', url: 'http://...' },
{ title: 'title 2', url: 'http://...' },
{ title: 'title 3', url: 'http://...' },
]
}
_renderTab = ({data}) => {
return ( {data.title} )
}
_renderPage = ({data}) => {
return ( )
}
render() {
return (
)
}
}
```
### API
| prop name | data type | default | functionality |
| --------------------- | --------- | ------------- | ------------- |
| data | array | [] | a data array of objects |
| dev | boolean | false | draws a black line around the pages and tabs for debugging |
| fullScreen | boolean | true | draws the in full screen mode (flex 1) |
| lazyrender | boolean | false | lazyrender renders the active page only when its in the viewport |
| lazyrenderThreshold | number | 1 | determines how many threshold left and right the current visible page sould be rendered if lazyrender={true} |
| renderAsCarousel | boolean | true | renders the as endless carousel |
| tabContainerPosition | string | 'top' | could be 'top' \|\| 'bottom' - places the tab container on top of the viewpager or on the bottom side |
| scrollTabsEnabled | boolean | false | |
| firePageChangeIfPassedScreenCenter | boolean | false | toggle's if onPageChange sould already be called when the dragged page passed half of the screen |
| staticTabWidth | number | {{screen width of device / 2}} | |
| initialPage | object | {} | key value pair of initial page: e. g. data=[{key:'page-a'}, {key:'page-b'}] & initialPage={{key:'page-b}} |
| showTabIndicator | boolean | true | toggles the tab indicator |
| tabIndicatorColor | string | 'transparent' | changes the color of the tab indicator |
| tabIndicatorHeight | number | 2 | height of tab indicator |
| tabsVisible | boolean | true | indicates if tabs should be visible or not |
| DividerComponent | any | null | renders a given Component between the tabs and the content area |
| renderPage | function | () => {} | render callback for content page |
| renderTab | function | () => {} | render callback for the tab |
| onPageChange | function | () => {} | callback when the page changes -> retuns the current pageNumber as first argument |
| experimentalMirroring | boolean | false | toggles the mirroring of the scrollposition of the threshold views - more information [here](https://github.com/meinto/react-native-mirror) |