React-native-snap-carousel: Active slide delay Android

Created on 30 Jun 2017  ·  4Comments  ·  Source: meliorence/react-native-snap-carousel

I have noticed that the selected slide takes a while to show as active.

For example, on Android, when executing snapToItem(index) the carousel scrolls nicely to the desired slide, but it takes around 3 seconds for it to show as active.

I am using the example code.
No problem on iOS thought.

reproduction?

Most helpful comment

@AndrePech Were you, by any chance, testing in debug mode? Because carousel's performances are crappy on Android when JS Dev Mode is activated.

Regarding the number of slides, I've used it with 15 really graphic slides on an old Android device without any issue. Still, you might be interested in knowing that I will probably release next week a FlatList implementation that should solve performance issues when displaying large numbers of slides.

All 4 comments

Hi @AndrePech,

I haven't been able to reproduce the issue so far. Have you tested on different Android devices?

Can you try adding the following to your <Carousel /> and see if it helps?

animationFunc={'spring'}
animationOptions={{
    friction: 4,
    tension: 40,
    isInteraction: false,
    useNativeDriver: true
}}

Thanks @bd-arc

EDIT 2: Figured out the problem, I was displaying around 20 slides, that seems too heavy for the Carousel.... I Tested with 5 slides and its very good now. But Unfortunately I will have to look for another solution, since I need to display more than 20 slides on my app.

The effect got better but it still taking around 2s to activate the "slide";
EDIT:
Actually it is taking around 2 to 3 seconds for it to call onSnapToItem() when a slide is selected;

I might be doing something wrong o my side:

(the code below is the way it worked better, on iOS it is very smooth)

<Carousel
              ref={(carousel) => { this._carousel = carousel; }}
              itemWidth={itemWidth}
              sliderHeight={300}
              enableMomentum={false}
              decelerationRate={0.1}
              activeSlideOffset={1}
              scrollEndDragDebounceValue={0.1}
              removeClippedSubviews={false}
              onSnapToItem={(index)=>this.onSnapToItem(index)}
              sliderWidth={sliderWidth}
              showsHorizontalScrollIndicator={false}
              containerCustomStyle={styles.carousel_container}
              animationFunc={'timing'}
              animationOptions={{
                friction: 4,
                tension: 40,
                isInteraction: false,
                useNativeDriver: true
              }}>
          {this.Slides(this.state.slides_list)}
        </Carousel>);

I will try to test on other Android Devices, I am trying to achieve the same very smooth effect from the showcase app, with the animation starting as soon as the slide enters the screen. I will keep trying and let you know if something changes.

@AndrePech Were you, by any chance, testing in debug mode? Because carousel's performances are crappy on Android when JS Dev Mode is activated.

Regarding the number of slides, I've used it with 15 really graphic slides on an old Android device without any issue. Still, you might be interested in knowing that I will probably release next week a FlatList implementation that should solve performance issues when displaying large numbers of slides.

@bd-arc Holy s*t I am really sorry, I is working wonder now.

Yes, I was JS DEV mode indeed, I was pretty sure it was off that did even check it. MY BAD.
hahaha, I will stick with this library.

Thank you very much and sorry again.

Was this page helpful?
0 / 5 - 0 ratings