Awesome
react-native-reanimated-carousel
<img src="assets/home-banner.png" width="100%"/>
The best carousel component in React Native community. ⚡️
- It completely solved this problem for
react-native-snap-carousel - Fully implemented using Reanimated 2&3
- Demo
Getting Started
Check out the documentation website.
Examples
Click on the image to see the code snippets [Try it] 🍺
| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
|---|---|---|
| <a href="./example/app/src/pages/normal/index.tsx">normal-horizontal</a> | <a href="./example/app/src/pages/normal/index.tsx">normal-vertical</a> | <a href="./example/app/src/pages/parallax/index.tsx">parallax-horizontal</a> |
| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./example/app/src/pages/parallax/index.tsx">parallax-vertical</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-horizontal-left</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-horizontal-right</a> |
| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./example/app/src/pages/stack/index.tsx">stack-vertical-left</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-vertical-right</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-horizontal-right</a> |
| <img src="assets/left-align.gif"/> | <img src="assets/right-align.gif" > | |
| <a href="./example/app/src/pages/left-align/index.tsx">left-align</a> | <a href="./example/app/src/pages/right-align/index.tsx">right-align</a> |
You can make cool animations with custom animation API [Details]
| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
|---|---|---|
| <a href="./example/app/src/pages/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./example/app/src/pages/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./example/app/src/pages/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
| <a href="./example/app/src/pages/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./example/app/src/pages/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./example/app/src/pages/anim-tab-bar/index.tsx">anim-tab-bar</a> |
| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> |
| <a href="./example/app/src/pages/marquee/index.tsx">marquee</a> | <a href="./example/app/src/pages/multiple/index.tsx">multiple</a> | <a href="./example/app/src/pages/circular/index.tsx">circular</a> |
| <img src="assets/fold.gif"/> | <img src="assets/tear.gif"/> | <img src="assets/press-swipe.gif"/> |
| <a href="./example/app/src/pages/fold/index.tsx">fold</a> | <a href="./example/app/src/pages/tear/index.tsx">tear</a> | <a href="./example/app/src/pages/press-swipe/index.tsx">press-swipe</a> |
| <img src="assets/cube-3d.gif"/> | <img src="assets/blur-parallax.gif"/> | <img src="assets/curve.gif"/> |
| <a href="./example/app/src/pages/cube-3d/index.tsx">cube-3d</a> | <a href="./example/app/src/pages/blur-parallax/index.tsx">blur-parallax</a> | <a href="./example/app/src/pages/curve/index.tsx">curve</a> |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> |
| <a href="./example/app/src/pages/parallax-layers/index.tsx">parallax-layers</a> | <a href="./example/app/src/pages/stack-cards/index.tsx">stack-cards</a> | <a href="./example/app/src/pages/flow/index.tsx">flow</a> |
| <img src="assets/blur-rotate.gif"/> | ||
| <a href="./example/app/src/pages/blur-rotate/index.tsx">blur-rotate</a> |
Sponsors
<p align="center"> <img src='https://github.com/dohooo/sponsors/blob/master/sponsors.png?raw=true'/> </p>License
MIT