How to solve blink image in react-native-snap-carousel?

Question

How to solve blink image when back to first item in react-native-snap-carousel ? I try to look for many examples but fail all.

This is my script :

renderSlider ({item, index}) {
    return (
          <View style={styles.slide}>
            <Image source={{uri: item.cover}} style={styles.imageSlider} />
          </View>
    );
}

<Carousel
    ref={(c) => { this._slider1Ref = c; }}
    data={data}
    renderItem={this.renderSlider}
    sliderWidth={width}
    itemWidth={(width - 30)}
    itemWidth={(width - 30)}
    inactiveSlideScale={0.96}
    inactiveSlideOpacity={1}
    firstItem={0}
    enableMomentum={false}
    lockScrollWhileSnapping={false}
    loop={true}
    loopClonesPerSide={100}
    autoplay={true}
    activeSlideOffset={50}
/>

the comple documentation you can find here and about the plugin api you can find here.

Please anyone help me.

Thanks.

Answer 1

I had the same issue when loop={true} was set.

We came up with this workaround:

We maintained the activeSlide value in a state, and created a reference of Carousel refCarousel.

const [activeSlide, setActiveSlide] = useState(0);
const refCarousel = useRef();

Then we added code in useEffect to manually move the carousel item to the first one back when it reaches the end with a delay of 3500 milliseconds which is also set to autoplayInterval props.

This way, we achieved the looping effect.

useEffect(() => {
    if (activeSlide === data.length - 1) {
        setTimeout(() => {
            refCarousel.current.snapToItem(0);
        }, 3500)
    }
}, [activeSlide]);

Below is the Carousel component declaration. Only the relevant props are shown here.

<Carousel
    ref={refCarousel}
    ...
    //loop={true}
    autoplay={true}
    autoplayDelay={500}
    autoplayInterval={3500}
    onSnapToItem={(index) => setActiveSlide(index)}
/>

Answer 2

use React Native Fast Image if you are facing blinking issue.