React-native-snap-carousel: Clicking/Tapping image or Navigating leading to stop auto play

[shamca0633]

Is this a bug report or a feature request?

Bug report ( or need help , not sure if this is achievable through existing code )

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes.(Looked into old issues, didn't find anything with related keywords.)

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Yes, both platform.

Is the bug reproductible in a production environment (not a debug one)?

YES

Have you made sure that it wasn't a React Native bug?

Doesn't seems like to be React native bug.

Have you been able to reproduce the bug in the provided example?

Yes.(With slight modification, but should happen in example1 code as well)

Environment

Environment:
React Native - 0.50,
React - 16
react-native-snap-carousel: 3.6/3.7
Target Platform:
Android (8.1)

I have tried https://snack.expo.io/rJ1XQrJM7 and able to reproduce this issue. ( IN both IOS/Android)

Steps to Reproduce

1. Execute the example1(loop one ) from https://github.com/archriss/react-native-snap-carousel/blob/master/example/src/index.js or https://snack.expo.io/rJ1XQrJM7
   2.Click on image, auto play stops(Same is happening in case of navigation (with TouchableOpacity) as well).

Expected Behavior

Auto play should continue after user clicks on image(or navigate).

Note : Auto play get restored when user swipes screen manually to next slides, but slides should have moved to next slides automatically without manual intervention.

Actual Behavior

Clicking/tapping on image(or navigating through TouchableOpacity) stops autoplay.

Reproducible Demo

https://snack.expo.io/rJ1XQrJM7

Additional questions:

1. If we swipe from one slide to another we can see white color margin b/w 2 images , Is it possible to minimize the margin(may be 0). Below one suggests to add margin,I have made that 0 but still see margin while slides to next image.

https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#margin-between-slides.

2.Also, currently we have req. to show image of size =( width = screenWidth, height = screenWidth/2), if I understand correctly https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#viewport-wide-slides--no-preview-effect
should we explore https://github.com/leecade/react-native-swiper#basic-usage as well?

I think , if we get solution to auto play issue then I am happy to use this carousel for our use case(as we might be interested in preview feature in future)

Thanks.

[bd-arc]

Hi @shamca0633,

Regarding your issue, this is a known bug that I haven't addressed yet. I'll take a look at it as soon as possible. FYI, the root of the matter lies here.

To answer your questions:

1. The "margin" is linked to the inactiveSlideScale prop. You can set it to 1 if needed, but you'll then lose the scale effect.

2. Yes, I confirm what I've written in the doc.

[shamca0633]

Thanks for you quick response.
I wanted to check few more things which is blocking us to move forward on this plug-in.

1. I am observing a delay in initial loading of images. We have small set of images(max 10) only still facing this issue. Also to compare we tested it with some simple code (without auto scroll/loop,etc) and can see images getting load faster.Is it this plug-in adding some delay due to additional feature, if yes what are the recommendation to minimize initial load time?it has anything to do with loopClonesPerSide , is it loading 3 copies and adding to delay?
   https://medium.com/the-react-native-log/custom-scrolling-carousel-in-react-native-15ee129e7e68

2.Once images are initially loaded seems like it scrolls a bit(and appears like flicker). Is it known issue?

3.At certain slide( 4th one out of 6 , with SLIDER_1_FIRST_ITEM =1 and loopClonesPerSide={3}) always flicker and in every loop, rest is fine.Not able to get logic on why 4th one.

4.Also, when I swipe fast then it reaches to last slides and refuse to swipe further in same direction, but able to swipe in reverse direction. Also once auto play happens then user can further swipe to next slide.Is there any end of loop from where user can't swipe further ? Is there any parameters there to handle this?

Configuration:

        <View>
            <Carousel
                ref={c => this._slider1Ref = c}
                data={ENTRIES1}
                renderItem={this._renderItem}
                sliderWidth={sliderWidth}
                itemWidth={itemWidth}
                firstItem={SLIDER_1_FIRST_ITEM}
                inactiveSlideScale={1}
                activeSlideAlignment={'start'}
                inactiveSlideOpacity={1}
                inactiveSlideShift={0.6}
                containerCustomStyle={styles.slider}
                contentContainerCustomStyle={styles.sliderContentContainer}
                loop={true}
                loopClonesPerSide={3}
                autoplay={true}
                lockScrollWhileSnapping={true}
                enableMomentum ={true}
                autoplayDelay={3000}
                autoplayInterval={2000}
                onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index})
                }
            />
            <Pagination
                dotsLength={ENTRIES1.length}
                activeDotIndex={slider1ActiveSlide}
                containerStyle={styles.paginationContainer}
                dotColor={'rgba(255, 255, 255, 0.92)'}
                dotStyle={styles.paginationDot}
                inactiveDotColor={colors.black}
                inactiveDotOpacity={0.6}
                inactiveDotScale={0.60}
                carouselRef={this._slider1Ref}
                tappableDots={!!this._slider1Ref}
            />
        </View>

Note : I have tested above on Android Simulator (8.1) and on Android real device.
I have gone through some existing performance/flickers issues but was not able to relate it with my case( or may be you can point me to , if I missed)

Thanks.

[shamca0633]

Thanks, setting "inactiveSlideScale" to 1 solved the margin b/w slides issue.

[shashank19909]

@bd-arc any estimate to when can we excpect this fix?
Also thank you very much for this wonderful library

[StephentTom]

same issue

[anoopmm]

are there any updates on this?

[Lves]

when tap Item how set not stop autoplay???

[164738777]

same issue

[zhulin2609]

same issue

[iyoucheng]

Carousel.js line 812, remove the _onTouchStart method can fix this bug, but while toucing the image, it still executes autoplay, may could add a _onTouchEnd method

_onTouchStart() {
  // `onTouchStart` is fired even when `scrollEnabled` is set to `false`
  if (this._getScrollEnabled() !== false && this._autoplaying && this.props.touchStopAutoplay) {
      this.stopAutoplay();
  }
}

_onTouchEnd() {
    this.startAutoplay()
}

[Marcello168]

same issue
,how to solve?

[bd-arc]

Fixed in 3.8.0.

[haduy97]

Thanks for you quick response.
I wanted to check few more things which is blocking us to move forward on this plug-in.

1. I am observing a delay in initial loading of images. We have small set of images(max 10) only still facing this issue. Also to compare we tested it with some simple code (without auto scroll/loop,etc) and can see images getting load faster.Is it this plug-in adding some delay due to additional feature, if yes what are the recommendation to minimize initial load time?it has anything to do with loopClonesPerSide , is it loading 3 copies and adding to delay?
   https://medium.com/the-react-native-log/custom-scrolling-carousel-in-react-native-15ee129e7e68

2.Once images are initially loaded seems like it scrolls a bit(and appears like flicker). Is it known issue?

3.At certain slide( 4th one out of 6 , with SLIDER_1_FIRST_ITEM =1 and loopClonesPerSide={3}) always flicker and in every loop, rest is fine.Not able to get logic on why 4th one.

4.Also, when I swipe fast then it reaches to last slides and refuse to swipe further in same direction, but able to swipe in reverse direction. Also once auto play happens then user can further swipe to next slide.Is there any end of loop from where user can't swipe further ? Is there any parameters there to handle this?

Configuration:

        <View>
            <Carousel
                ref={c => this._slider1Ref = c}
                data={ENTRIES1}
                renderItem={this._renderItem}
                sliderWidth={sliderWidth}
                itemWidth={itemWidth}
                firstItem={SLIDER_1_FIRST_ITEM}
                inactiveSlideScale={1}
                activeSlideAlignment={'start'}
                inactiveSlideOpacity={1}
                inactiveSlideShift={0.6}
                containerCustomStyle={styles.slider}
                contentContainerCustomStyle={styles.sliderContentContainer}
                loop={true}
                loopClonesPerSide={3}
                autoplay={true}
                lockScrollWhileSnapping={true}
                enableMomentum ={true}
                autoplayDelay={3000}
                autoplayInterval={2000}
                onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index})
                }
            />
            <Pagination
                dotsLength={ENTRIES1.length}
                activeDotIndex={slider1ActiveSlide}
                containerStyle={styles.paginationContainer}
                dotColor={'rgba(255, 255, 255, 0.92)'}
                dotStyle={styles.paginationDot}
                inactiveDotColor={colors.black}
                inactiveDotOpacity={0.6}
                inactiveDotScale={0.60}
                carouselRef={this._slider1Ref}
                tappableDots={!!this._slider1Ref}
            />
        </View>

Note : I have tested above on Android Simulator (8.1) and on Android real device.
I have gone through some existing performance/flickers issues but was not able to relate it with my case( or may be you can point me to , if I missed)

Thanks.

Thank you man, you just save my day.

This props:
inactiveSlideScale={1}
inactiveSlideOpacity={1}
inactiveSlideShift={0.6}

Solved the flicker/blink issue when reached to last item and jump into the first item without blinking (only on Android device)