React-Native-Snap-Carousel

Swiper component for React Native featuring previewsmultiple layoutsparallax imagesperformant handling of huge numbers of items, and RTL support. Compatible with Android & iOS.


New feature: layouts

Do you want to find out more?

react-native-snap-carousel default layout react-native-snap-carousel tinder layout react-native-snap-carousel stack layout


✨ Do you want an even better plugin? Vote for React Native’s feature requests to let the Facebook team know what they need to improve!


Table of contents

  1. Showcase
  2. Usage
  3. Example
  4. Props, methods and getters
  5. Layouts and custom interpolations
  6. ParallaxImage component
  7. Pagination component
  8. Tips and tricks
  9. Known issues
  10. Important note regarding Android
  11. Important note regarding iOS
  12. Roadmap
  13. Credits

Showcase

Archriss‘ “Ville d’Aix-en-Provence” app

This app is available on Android and iOS. It uses version 3.2.0 of the plugin, with FlatList’s implementation and parallax images.

react-native-snap-carousel archriss aix react-native-snap-carousel archriss aix

Archriss’ showcase app

You can try the app live on Android and iOS. It currently uses version 1.4.0 of the plugin. Be aware that sliders’ layouts will break on RTL devices since support was added in version 2.1.0 (see #38).

react-native-snap-carousel react-native-snap-carousel react-native-snap-carousel

Please note that we do not plan on Open-Sourcing the code of our showcase app. Still, we’ve put together an examplefor you to play with, and you can find some insight about our map implementation in this comment. The folks at codedaily.io have created a great tutorial about implementing a similar feature. Go check it out!

Usage

$ npm install --save 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}
            />
        );
    }
}

Example

You can find the following example in the /example folder.

react-native-snap-carousel

Props, methods, and getters

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 documentation of its own.

📚 Documentation for “Props, methods, and getters”

Layouts and custom interpolations

Built-in layouts

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.

react-native-snap-carousel default layout

<Carousel layout={'default'} />

react-native-snap-carousel stack layout ios react-native-snap-carousel stack layout android

<Carousel layout={'stack'} layoutCardOffset={`18`} />

react-native-snap-carousel tinder layout ios react-native-snap-carousel tinder layout android

<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 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). The tradeof is that you won’t benefit from any of FlatList’s advanced optimizations. See this issue for workarounds; or you may want to implement your own custom interpolation.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.