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.

platforms npm npm

github issues github closed issues Issue Stats


🙌 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 (
            
                { item.title }
            
        );
    }

    render () {
        return (
             { this._carousel = c; }}
              data={this.state.entries}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
            />
        );
    }
}

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.