[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70655":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},70655,"react-native-snap-carousel","meliorence\u002Freact-native-snap-carousel","meliorence","Swiper\u002Fcarousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.","",null,"JavaScript",10521,2280,94,347,0,5,45,"BSD 3-Clause \"New\" or \"Revised\" License",false,"master",true,[24,25,26,27,28,29],"advanced-effects","carousel","flatlist-based","infinite-scroll","parallax-effect","swiper","2026-06-12 02:02:36","# react-native-snap-carousel\n\n![platforms](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square&colorB=191A17)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-native-snap-carousel.svg?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-snap-carousel)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Freact-native-snap-carousel.svg?style=flat-square&colorB=007ec6)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-snap-carousel)\n\u003C!-- [![github release](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease\u002Fmeliorence\u002Freact-native-snap-carousel.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Freleases) -->\n[![github issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fmeliorence\u002Freact-native-snap-carousel.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fissues)\n[![github closed issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-closed\u002Fmeliorence\u002Freact-native-snap-carousel.svg?style=flat-square&colorB=44cc11)](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fissues?q=is%3Aissue+is%3Aclosed)\n[![Issue Stats](https:\u002F\u002Fimg.shields.io\u002Fissuestats\u002Fi\u002Fgithub\u002Fmeliorence\u002Freact-native-snap-carousel.svg?style=flat-square&colorB=44cc11)](http:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fissues)\n\n-----\n-----\n\n## ✨ Some great news for you, fellow plugin user!\n\n### 💡 **[Head over there now](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FVERSION_4.md)** to learn more about all the goodness that's coming your way.\n\n-----\n-----\n\n## Table of contents\n\n1. [Showcase](#showcase)\n1. [Usage](#usage)\n1. [Example](#example)\n1. [Props, methods and getters](#props-methods-and-getters)\n1. [Layouts and custom interpolations](#layouts-and-custom-interpolations)\n1. [`ParallaxImage` component](#parallaximage-component)\n1. [`Pagination` component](#pagination-component)\n1. [Tips and tricks](#tips-and-tricks)\n1. [Known issues](#known-issues)\n1. [Important note regarding Android](#important-note-regarding-android)\n1. [Important note regarding iOS](#important-note-regarding-ios)\n1. [Roadmap](#roadmap)\n1. [Credits](#credits)\n\n## Showcase\n\n### :raised_hands: New feature: layouts\n\n[Do you want to find out more?](#layouts-and-custom-interpolations)\n\n![react-native-snap-carousel default layout](https:\u002F\u002Fi.imgur.com\u002Fe1WbZcu.gif)\n![react-native-snap-carousel tinder layout](https:\u002F\u002Fi.imgur.com\u002FR7OpEFs.gif)\n![react-native-snap-carousel stack layout](https:\u002F\u002Fi.imgur.com\u002FfoMIGM2.gif)\n\n### Real-world examples\n\nThese are live apps we've created that make heavy use of the plugin. Don't be shy, share yours if you've done something awesome with it!\n\n![react-native-snap-carousel aix](https:\u002F\u002Fi.imgur.com\u002FpPm0csc.gif)\n![react-native-snap-carousel aix](https:\u002F\u002Fi.imgur.com\u002FUFsPlz2.gif)\n\n![react-native-snap-carousel](https:\u002F\u002Fi.imgur.com\u002FFope3uj.gif)\n![react-native-snap-carousel](https:\u002F\u002Fi.imgur.com\u002FWNOBYfl.gif)\n![react-native-snap-carousel](https:\u002F\u002Fi.imgur.com\u002FsK5DKaG.gif)\n\n---\n\n## :handshake: Maintainers wanted\n\nHey there,\n\nCreating and maintaining this plugin has been a fun ride that started in 2016. We thank you all for your appreciation and for making the most out of it! You've motivated us to spend countless hours improving the plugin, and made us happy to give back to the Open Source community.\n\nPut simply, we love this project. However we currently aren't able to give it the love it deserves and the care it requires. **If you have enough time and knowledge, and want to become a maintainer, please let us know**.\n\n### 💡 **[Just head there if you're interested](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fissues\u002F632).**\n\nWe're not abandoning the ship, but we need more people to help us keep it alive and well!\n\n---\n\n## Usage\n\n```bash\n$ npm install --save react-native-snap-carousel\n```\n\nIf you're using Typescript you should also install type definitions:\n```bash\n$ npm install --save @types\u002Freact-native-snap-carousel\n```\n\n\n```javascript\nimport Carousel from 'react-native-snap-carousel';\n\nexport class MyCarousel extends Component {\n\n    _renderItem = ({item, index}) => {\n        return (\n            \u003CView style={styles.slide}>\n                \u003CText style={styles.title}>{ item.title }\u003C\u002FText>\n            \u003C\u002FView>\n        );\n    }\n\n    render () {\n        return (\n            \u003CCarousel\n              ref={(c) => { this._carousel = c; }}\n              data={this.state.entries}\n              renderItem={this._renderItem}\n              sliderWidth={sliderWidth}\n              itemWidth={itemWidth}\n            \u002F>\n        );\n    }\n}\n```\n\n## Example\n\nHere are simple examples that can be edited in real time in your browser:\n\n- https:\u002F\u002Fsnack.expo.io\u002F@vitkor\u002Fcarousel-simple-example\n- https:\u002F\u002Fsnack.expo.io\u002F@bd-arc\u002Freact-native-snap-carousel-%7C-example-with-custom-interpolations\n\nYou can also find a more in-depth (read \"complex\") one in the [`\u002Fexample` folder](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Ftree\u002Fmaster\u002Fexample).\n\n![react-native-snap-carousel](https:\u002F\u002Fi.imgur.com\u002FpZincya.gif)\n\n## Props, methods and getters\n\nIn order to let you to create mighty carousels and to keep up with your requests, we add new features on a regular basis. Consequently, the list of available props has become really huge and deserves a documentation of its own.\n\n### :books: [Documentation for \"Props, methods and getters\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FPROPS_METHODS_AND_GETTERS.md)\n\n## Layouts and custom interpolations\n\n### Built-in layouts\n\nIn version `3.6.0`, we've added two new layouts on top of the original one: the first one is called 'stack' since it mimics a stack of cards, and the other one is called 'tinder' since it provides a Tinder-like animation.\n\nYou can choose between the three of them using [the new prop `layout`](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FPROPS_METHODS_AND_GETTERS.md#style-and-animation) and you can modify the default card offset in the 'stack' and 'tinder' layouts with [prop `layoutCardOffset`](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FPROPS_METHODS_AND_GETTERS.md#style-and-animation).\n\n![react-native-snap-carousel default layout](https:\u002F\u002Fi.imgur.com\u002Fe1WbZcu.gif)\n```javascript\n\u003CCarousel layout={'default'} \u002F>\n```\n\n![react-native-snap-carousel stack layout ios](https:\u002F\u002Fi.imgur.com\u002Fc7pU4rT.gif)\n![react-native-snap-carousel stack layout android](https:\u002F\u002Fi.imgur.com\u002FAnruacR.gif)\n```javascript\n\u003CCarousel layout={'stack'} layoutCardOffset={`18`} \u002F>\n```\n\n![react-native-snap-carousel tinder layout ios](https:\u002F\u002Fi.imgur.com\u002FD9QyTzb.gif)\n![react-native-snap-carousel tinder layout android](https:\u002F\u002Fi.imgur.com\u002Fab1TI4e.gif)\n```javascript\n\u003CCarousel layout={'tinder'} layoutCardOffset={`9`} \u002F>\n```\n\nA few things worth noting:\n* As you can see, the effect had to be inverted on Android. This has to do with [a really annoying Android-specific bug](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FCUSTOM_INTERPOLATIONS.md#android).\n* Even though the new layouts have been created with horizontal carousels in mind, they will also work with vertical ones \\o\u002F\n* :warning: **You should NOT use `stack` or `tinder` layouts if you have a large data set to display.** In order to avoid rendering issues, the carousel will use a `ScrollView` component rather than a `FlatList` one for those layouts (see [prop `useScrollView`](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FPROPS_METHODS_AND_GETTERS.md#behavior)). The tradeof is that you won't benefit from any of `FlatList`'s advanced optimizations. See [this issue](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fissues\u002F262) for workarounds; or you may want to implement your own [custom interpolation](#custom-interpolations).\n\n### Custom interpolations\n\nOn top of the new layouts, we've exposed the logic we used so that users can create their own awesome layouts! If you're interested, take a deep breath and dive into the dedicated documentation.\n\n### :books: [Documentation for \"Custom interpolations\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FCUSTOM_INTERPOLATIONS.md)\n\nHere are a few examples of what can easily be achieved (you can explore [the source code](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fexample\u002Fsrc\u002Futils\u002Fanimations.js) and try it live in [the provided example](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Ftree\u002Fmaster\u002Fexample)):\n\n![react-native-snap-carousel custom layout](https:\u002F\u002Fi.imgur.com\u002FOrdLsCM.gif)\n![react-native-snap-carousel custom layout](https:\u002F\u002Fi.imgur.com\u002FslnTbyG.gif)\n![react-native-snap-carousel custom layout](https:\u002F\u002Fi.imgur.com\u002FkDx3xTc.gif)\n\n## `ParallaxImage` component\n\nVersion `3.0.0` introduced a `\u003CParallaxImage \u002F>` component, an image component aware of carousel's current scroll position and therefore able to display a nice parallax effect (powered by the native driver to ensure top-notch performance).\n\n### :books: [Documentation for \"`ParallaxImage` component\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FPARALLAX_IMAGE.md)\n\n![react-native-snap-carousel parallax image](https:\u002F\u002Fi.imgur.com\u002F6iIb4SR.gif)\n\n## `Pagination` component\n\nStarting with version `2.4.0`, a customizable `\u003CPagination \u002F>` component has been added. You can see below how it looks like with its default configuration.\n\n### :books: [Documentation for \"`Pagination` component\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FPAGINATION.md)\n\n![react-native-snap-carousel pagination](https:\u002F\u002Fi.imgur.com\u002FFLQcGGL.gif)\n\n## Tips and tricks\n\nWe've gathered together all the useful tips and tricks. There is a bunch of them, which makes **this section a must-read!**\n\n### :books: [Documentation for \"Tips and tricks\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FTIPS_AND_TRICKS.md)\n\n## Known issues\n\n**Make sure to read about the known issues before opening a new one**; you may find something useful.\n\n### :books: [Documentation for \"Known issues\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FKNOWN_ISSUES.md)\n\n## Important note regarding Android\n\n![react-native-snap-carousel android](https:\u002F\u002Fi.imgur.com\u002F03iuB2Um.jpg)\n\nAndroid's debug mode is a mess: timeouts regularly desynchronize and scroll events are fired with some lag, which completely alters the inner logic of the carousel. **On Android, you *will* experience issues with carousel's behavior when JS Dev Mode is enabled, and you *might* have trouble with unreliable callbacks and loop mode when it isn't**. This is unfortunate, but it's rooted in various flaws of `ScrollView`\u002F`FlatList`'s implementation and the miscellaneous workarounds we had to implement to compensate for it.\n\n:warning: **Therefore you should always check if the issue you experience also happens in a production environment. This is, sadly, the only way to test the real performance and behavior of the carousel.**\n\n> For more information, you can read the following notes: [\"Android performance\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FKNOWN_ISSUES.md#android-performance) and [\"Unreliable callbacks\"](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FKNOWN_ISSUES.md#unreliable-callbacks).\n\n## Important note regarding iOS\n\n![react-native-snap-carousel ios](https:\u002F\u002Fi.imgur.com\u002FnpuiUSbh.png)\n\n:warning: When debugging with the iOS simulator, **you're only one \"Cmd + T\" away from toggling \"Slow Animations\"**. If carousel's animations seem painfully slow, make sure that you haven't enabled this setting by mistake.\n\n## Roadmap\n\n- [ ] Add [more examples](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fissues\u002F257)\n- [ ] Base the plugin on a component less buggy than `FlatList`\n- [X] Implement different layouts and allow using custom interpolations\n- [X] Implement both `FlatList` and `ScrollView` handling\n- [X] Add the ability to provide custom items animation\n- [X] Implement 'loop' mode\n- [X] Improve Android's behavior\n- [x] Add parallax image component\n- [x] Base the plugin on `FlatList` instead of `ScrollView`\n- [x] Add alignment option\n- [x] Add pagination component\n- [x] Add vertical implementation\n- [x] Handle device orientation event (see [this note](https:\u002F\u002Fgithub.com\u002Fmeliorence\u002Freact-native-snap-carousel\u002Fblob\u002Fmaster\u002Fdoc\u002FTIPS_AND_TRICKS.md#handling-device-rotation))\n- [x] Add RTL support\n- [x] Improve momemtum handling\n- [x] Improve snap on Android\n- [x] Handle passing 1 item only\n- [x] Fix centering\n\n## Credits\n\nWritten by [Benoît Delmaire](https:\u002F\u002Ffr.linkedin.com\u002Fin\u002Fbenoitdelmaire) ([bd-arc](https:\u002F\u002Fgithub.com\u002Fbd-arc)) and [Maxime Bertonnier](https:\u002F\u002Ffr.linkedin.com\u002Fin\u002Fmaxime-bertonnier-744351aa) ([Exilz](https:\u002F\u002Fgithub.com\u002FExilz)) at\n[Meliorence](https:\u002F\u002Fwww.meliorence.com\u002F).\n","react-native-snap-carousel 是一个适用于 React Native 的轮播组件，支持预览、多种布局、视差效果以及高效处理大量数据项等功能。该项目基于 FlatList 构建，能够提供流畅的滚动体验，并且具备无限滚动特性。它还内置了 ParallaxImage 组件用于实现视差图片效果和 Pagination 组件来显示分页指示器，增强了用户体验。此外，该插件兼容 Android 和 iOS 平台，非常适合需要在移动应用中展示商品列表、图片集或内容推荐等场景使用。",2,"2026-06-11 03:33:13","high_star"]