Clone from react-native-snap-carousel and modify
๐ก Head over there now to learn more about all the goodness that's coming your way.
- Showcase
- Usage
- Example
- Props, methods and getters
- Layouts and custom interpolations
ParallaxImage
componentPagination
component- Tips and tricks
- Known issues
- Important note regarding Android
- Important note regarding iOS
- Roadmap
- Credits
These 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!
Hey there,
Creating 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.
Put 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.
We're not abandoning the ship, but we need more people to help us keep it alive and well!
$ npm install --save react-native-snap-carousel
If you're using Typescript you should also install type definitions:
$ npm install --save @types/react-native-snap-carousel
import Carousel from 'react-native-snap-carousel';
export class MyCarousel extends Component {
_renderItem = ({item, index}) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{ item.title }</Text>
</View>
);
}
render () {
return (
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
}
Here are simple examples that can be edited in real time in your browser:
- https://snack.expo.io/@vitkor/carousel-simple-example
- https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations
You can also find a more in-depth (read "complex") one in the /example
folder.
In 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.
In 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.
You can choose between the three of them using the new prop layout
and you can modify the default card offset in the 'stack' and 'tinder' layouts with prop layoutCardOffset
.
<Carousel layout={'default'} />
<Carousel layout={'stack'} layoutCardOffset={`18`} />
<Carousel layout={'tinder'} layoutCardOffset={`9`} />
A few things worth noting:
- As you can see, the effect had to be inverted on Android. This has to do with a really annoying Android-specific bug.
- Even though the new layouts have been created with horizontal carousels in mind, they will also work with vertical ones \o/
โ ๏ธ You should NOT usestack
ortinder
layouts if you have a large data set to display. In order to avoid rendering issues, the carousel will use aScrollView
component rather than aFlatList
one for those layouts (see propuseScrollView
). The tradeof is that you won't benefit from any ofFlatList
's advanced optimizations. See this issue for workarounds; or you may want to implement your own custom interpolation.
On 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.
Here are a few examples of what can easily be achieved (you can explore the source code and try it live in the provided example):
Version 3.0.0
introduced a <ParallaxImage />
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).
Starting with version 2.4.0
, a customizable <Pagination />
component has been added. You can see below how it looks like with its default configuration.
We've gathered together all the useful tips and tricks. There is a bunch of them, which makes this section a must-read!
Make sure to read about the known issues before opening a new one; you may find something useful.
Android'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
/FlatList
's implementation and the miscellaneous workarounds we had to implement to compensate for it.
For more information, you can read the following notes: "Android performance" and "Unreliable callbacks".
- Add more examples
- Base the plugin on a component less buggy than
FlatList
- Implement different layouts and allow using custom interpolations
- Implement both
FlatList
andScrollView
handling - Add the ability to provide custom items animation
- Implement 'loop' mode
- Improve Android's behavior
- Add parallax image component
- Base the plugin on
FlatList
instead ofScrollView
- Add alignment option
- Add pagination component
- Add vertical implementation
- Handle device orientation event (see this note)
- Add RTL support
- Improve momemtum handling
- Improve snap on Android
- Handle passing 1 item only
- Fix centering
Written by Benoรฎt Delmaire (bd-arc) and Maxime Bertonnier (Exilz) at Archriss.