React-native-swiper: one more abandoned react native library, huh?

[SilencerWeb]

[adammcarth]

Use react-native-snap-carousel instead. It requires a little more customisation to get off the ground, but it has better performance, better documentation and features that actually work.

Here's a code example with dots indicating the slide position (like this package does):

import React, { Component } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import SnapCarousel from 'react-native-snap-carousel';

export default class ImageSwiper extends Component {
  constructor(props) {
    super(props);
    this.screenWidth = Dimensions.get('window').width;
    this.state = {
      imageUrls: ['http://img1.png', 'http://img2.png', 'http://img3.png'],
      currentSlideIndex: 0,
    };
    this._updateCurrentSlideIndex = this._updateCurrentSlideIndex.bind(this);
  }

  // Should be a static function since we don't use `this` inside.
  static renderSlide(imageUrl) {
    return <Image source={{ uri: imageUrl }} width={this.screenWidth} height={250} />;
  }

  _updateCurrentSlideIndex(i) {
    this.setState({ currentSlideIndex: i });
  }

  render() {
    return (
      <View style={s.container}>
        {/* Slider */}
        <SnapCarousel
          data={this.state.imageUrls}
          renderItem={ImageSwiper.renderSlide}
          layout="default"
          sliderWidth={this.screenWidth} // cannot be a percentage
          itemWidth={this.screenWidth} // cannot be a percentage
          inactiveSlideScale={1} // neutralise carousel effect
          inactiveSlideOpacity={1} // neutralise carousel effect
          onSnapToItem={i => this._updateCurrentSlideIndex(i)} // update slide dots
        />

        {/* Slide Dots */}
        <View style={s.dotsContainer}>
          {this.state.imageUrls.map((url, i) => (
            <View
              key={`dot_${url}`}
              style={[
                s.dot,
                i === this.state.currentSlideIndex ? s.dotCurrent : {},
              ]}
            />
          ))}
        </View>
      </View>
    );
  }
}

// Styles
const s = StyleSheet.create({
  container: {
    width: '100%',
  },

  dotsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
  },

  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginRight: 5,
    backgroundColor: '#CCCCCC',
  },

  dotCurrent: {
    backgroundColor: '#007AFF',
  },
});

You can also get the next/previous buttons to work just as easily by triggering custom methods found here in Snap Carousel the documentation.

Hope this helped someone.

[sbefort]

@adammcarth, the authors of react-native-snap-carousel recommend react-native-swiper for this use case.

https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#viewport-wide-slides--no-preview-effect

If you are using the plugin without the preview effect (meaning that your slides, as well as your slider, are viewport wide), we do not recommend using this plugin.

You'll be better off with react-native-swiper for the simple reason that it implements the ViewPagerAndroid component, which provides a way better overall feeling on Android, whereas we must hack our way around the frustrating limitations of the ScrollView component.

[SilencerWeb]

@adammcarth well, but react-native-swiper is not maintaining anymore and it is just another abandoned react-native component.

[adammcarth]

@sbefort Good pickup, I didn't actually see that in the documentation.

I think I disagree though. The advise seems outdated given how deteriorated react-native-swiper has become since, and I'd rather slightly compromise UX on Android than have a buggy slider.

I certainly wouldn't use the momentum option in react-native-snap-carousel though, that really performs poorly when you have a flat slider like this.

[daveteu]

have u guys found anything that worked for full width simple carousel without preview? I've tried so many and can't find a simple carousel like how we have for web app.

[shadowbrush]

Thank you, @adammcarth! Took me two hours to convert over to react-native-snap-carousel and all the pain went away!

[imvv]

@daveteu Did you have any luck finding an alternative?