swiping on react-native-snap-carousel is not working as expected

Question

I am trying to use react-native-snap-carousel but however, the swiping effect is not working as expected - it is often difficult to swipe left and right, it requires user to swipe harder to move to another picture (as illustrated in the link below).

Swiping issue with React Native Snap Carousel

I am not able to find any documented soluton but I found one possible prop - swipeThreshold. I try various value, but still the issue persist.

Does anyone know the solution to this?

Answer 1

I suggest you to use react-native-image-slider.

it's flexible and easy to use. https://www.npmjs.com/package/react-native-image-slider I made a component named slider.js:

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Image,

} from 'react-native';
import ImageSlider from 'react-native-image-slider';
export default class Slider extends Component {
  render() {
    return (
      <ImageSlider
        loop
        autoPlayWithInterval={3000}
        images={this.props.dataSource}
        customSlide={({ index, item, style, width }) => (
          <View key={index} style={[style, styles.customSlide]}>
            <Image source={{ uri: item }} style={styles.customImage} />
          </View>
        )}
      />
    );
  }
}

const styles = StyleSheet.create({
  customImage: {
    height: 180,
    marginRight: 20,
    marginLeft: 20,
    borderWidth: 1,
    borderRadius: 10,
    marginTop: 8,
  },
  customSlide: {
    backgroundColor: '#eee',
  },
});

you can add this to your project and use it wherever you need it like this:

import Slider from '../component/slider';
export default class App extends Component {
  constructor(props) {
    super(props);

this.state = {
  images: [
    'https://placeimg.com/640/480/nature',
    'https://placeimg.com/640/480/tech',
    'https://placeimg.com/640/480/animals',
    'https://placeimg.com/640/480/tech',
  ],
}


 render() {
    return (
    <View style={{flex: 1, backgroundColor: '#eee'}}>
                <Slider dataSource={this.state.images} />
              </View>
);
}
}