{"id":22725202,"url":"https://github.com/meinto/react-native-viewpager-carousel","last_synced_at":"2025-04-13T19:08:30.806Z","repository":{"id":57341294,"uuid":"89391752","full_name":"meinto/react-native-viewpager-carousel","owner":"meinto","description":"a flexible viewpager library with carousel functionality","archived":false,"fork":false,"pushed_at":"2023-01-03T15:16:19.000Z","size":1826,"stargazers_count":39,"open_issues_count":14,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T13:40:48.296Z","etag":null,"topics":["android","carousel","ios","pager-component","react-native","rondell","swipe","swipeview","tabbar","tabs","viewpager"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meinto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-25T18:08:00.000Z","updated_at":"2024-01-11T21:24:22.000Z","dependencies_parsed_at":"2023-02-01T07:01:08.760Z","dependency_job_id":null,"html_url":"https://github.com/meinto/react-native-viewpager-carousel","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-viewpager-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-viewpager-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-viewpager-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-viewpager-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meinto","download_url":"https://codeload.github.com/meinto/react-native-viewpager-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248766734,"owners_count":21158301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","carousel","ios","pager-component","react-native","rondell","swipe","swipeview","tabbar","tabs","viewpager"],"created_at":"2024-12-10T15:10:13.443Z","updated_at":"2025-04-13T19:08:30.774Z","avatar_url":"https://github.com/meinto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Viewpager Carousel\n\n[![npm version](https://badge.fury.io/js/react-native-viewpager-carousel.svg)](https://badge.fury.io/js/react-native-viewpager-carousel)\n[![dependencie status](https://david-dm.org/meinto/react-native-viewpager-carousel.svg)](https://david-dm.org/meinto/react-native-viewpager-carousel)\n[![dev-dependency status](https://david-dm.org/meinto/react-native-viewpager-carousel/dev-status.svg)](https://david-dm.org/meinto/react-native-viewpager-carousel?type=dev)\n[![npm](https://img.shields.io/npm/dm/react-native-viewpager-carousel.svg)](https://www.npmjs.com/package/react-native-viewpager-carousel)\n[![npm](https://img.shields.io/npm/dt/react-native-viewpager-carousel.svg)](https://www.npmjs.com/package/react-native-viewpager-carousel)\n[![travis build](https://travis-ci.org/meinto/react-native-viewpager-carousel.svg?branch=master)](https://travis-ci.org/meinto/react-native-viewpager-carousel)\n\n\n## Contribution\n\nFeel free to make a pull request. I'm happy about every contribution.\n\n## Examples\n\nYou 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.\n\n## Installation\n\n```\nyarn add react-native-viewpager-carousel\n```\nor \n```\nnpm install --save react-native-viewpager-carousel\n```\n\n## Preview\n\n![preview](https://raw.githubusercontent.com/meinto/react-native-viewpager-carousel/master/tabbed-pager.gif)\n\n## ViewPager\n\nThe ```\u003cViewPager /\u003e``` is the base component of the library. Till now it acts like a simple view-carousel:\n\n```javascript\nimport { ViewPager } from 'react-native-viewpager-carousel'\n\nclass ExampleCarousel extends PureComponent {\n\n    constructor() {\n        this.data = [\n            { title: 'title 1' },\n            { title: 'title 2' },\n            { title: 'title 3' },\n        ]\n    }\n    \n    _renderPage = ({data}) =\u003e {\n        return ( \u003cText\u003e{item.title}\u003c/Text\u003e )\n    }\n\n    render() {\n        return (\n            \u003cViewPager\n                data={this.data}\n                renderPage={this._renderPage}\n            /\u003e\n        )\n    }\n}\n\n```\n\n### API\n\n| prop name             | data type | default | functionality |\n| --------------------- | --------- | ------- | ------------- |\n| containerStyle        | style     | {}      | the component is wrapped into a ```\u003cView /\u003e```. Styles to this ```\u003cView /\u003e``` can be assigned through this property |\n| contentContainerStyle | style     | {}      | posibility to set styles to the content container (the entire scrollable area) |\n| data                  | array     | []      | a data array of objects |\n| dev                   | boolean   | false   | draws a black line around the pages and tabs for debugging |\n| lazyrender            | boolean   | false   | lazyrender renders the active page only when its in the viewport |\n| lazyrenderThreshold   | number    | 1       | determines how many threshold left and right the current visible page sould be rendered if lazyrender={true} |\n| renderAsCarousel      | boolean   | true    | renders the \u003cViewPager /\u003e as endless carousel |\n| thresholdPages        | number    | 1       | number of pages left and right of the scrollable content (sneak preview) |\n| pageWidth             | number    | {{screen width of device}} | width of page |\n| initialPage           | object    | {}      | key value pair of initial page: e. g. data=[{key:'page-a'}, {key:'page-b'}] \u0026 initialPage={{key:'page-b}} |\n| scrollEnabled         | boolean   | true    | decleares wether the ViewPager should be able to scroll by user or not |\n| firePageChangeIfPassedScreenCenter | boolean | false | toggle's if onPageChange sould already be called when the dragged page passed half of the screen |\n| pagingEnabled        | boolean   | true    |  |\n| experimentalMirroring | boolean   | false   | toggles the mirroring of the scrollposition of the threshold views - more information [here](https://github.com/meinto/react-native-mirror) |\n| showNativeScrollIndicator | boolean | false | native ScrollView indicator is disabled by default |\n| renderPage            | function | () =\u003e {} | render callback for content page |\n| onPageChange          | function | () =\u003e {} | callback when the page changes -\u003e retuns the current pageNumber as first argument |\n| onScroll              | function | () =\u003e {} | callback when the content area scrolls |\n\n## TabbedPager\n\nIn addition to the ```\u003cViewPager /\u003e``` the ```\u003cTabbedPager /\u003e``` component provides an additional renderFunction for Tabs above the content view. The following pseudo-code shows the basic usage with an ```\u003cImage /\u003e``` as content and a ```\u003cText /\u003e``` as tab.\n\n```javascript\nimport { TabbedPager } from 'react-native-viewpager-carousel'\n\nclass ExampleCarousel extends PureComponent {\n\n    constructor() {\n        this.data = [\n            { title: 'title 1', url: 'http://...' },\n            { title: 'title 2', url: 'http://...' },\n            { title: 'title 3', url: 'http://...' },\n        ]\n    }\n    \n    _renderTab = ({data}) =\u003e {\n        return ( \u003cText\u003e{data.title}\u003c/Text\u003e )\n    }\n    \n    _renderPage = ({data}) =\u003e {\n        return ( \u003cImage source={{uri: data.url}} /\u003e )\n    }\n\n    render() {\n        return (\n            \u003cViewPager\n                data={this.data}\n                renderTab={this._renderTab}\n                renderPage={this._renderPage}\n            /\u003e\n        )\n    }\n}\n```\n\n### API\n\n| prop name             | data type | default       | functionality |\n| --------------------- | --------- | ------------- | ------------- |\n| data                  | array     | []            | a data array of objects |\n| dev                   | boolean   | false         | draws a black line around the pages and tabs for debugging |\n| fullScreen            | boolean   | true          | draws the \u003cTabbedPager /\u003e in full screen mode (flex 1) |\n| lazyrender            | boolean   | false         | lazyrender renders the active page only when its in the viewport |\n| lazyrenderThreshold   | number    | 1             | determines how many threshold left and right the current visible page sould be rendered if lazyrender={true} |\n| renderAsCarousel      | boolean   | true          | renders the \u003cTabbedPager /\u003e as endless carousel |\n| tabContainerPosition  | string    | 'top'         | could be 'top' \\|\\| 'bottom' - places the tab container on top of the viewpager or on the bottom side |  \n| scrollTabsEnabled     | boolean   | false         |  |\n| firePageChangeIfPassedScreenCenter | boolean | false | toggle's if onPageChange sould already be called when the dragged page passed half of the screen |\n| staticTabWidth        | number    | {{screen width of device / 2}} | |\n| initialPage           | object    | {}      | key value pair of initial page: e. g. data=[{key:'page-a'}, {key:'page-b'}] \u0026 initialPage={{key:'page-b}} |\n| showTabIndicator      | boolean   | true          | toggles the tab indicator |\n| tabIndicatorColor     | string    | 'transparent' | changes the color of the tab indicator |\n| tabIndicatorHeight    | number    | 2             | height of tab indicator |\n| tabsVisible           | boolean   | true          | indicates if tabs should be visible or not |\n| DividerComponent      | any       | null          | renders a given Component between the tabs and the content area |\n| renderPage            | function  | () =\u003e {}      | render callback for content page |\n| renderTab             | function  | () =\u003e {}      | render callback for the tab |\n| onPageChange          | function  | () =\u003e {}      | callback when the page changes -\u003e retuns the current pageNumber as first argument |\n| experimentalMirroring | boolean   | false         | toggles the mirroring of the scrollposition of the threshold views - more information [here](https://github.com/meinto/react-native-mirror) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeinto%2Freact-native-viewpager-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeinto%2Freact-native-viewpager-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeinto%2Freact-native-viewpager-carousel/lists"}