React-native-snap-carousel: Carousel animation is not smooth (has some delay)

[duongkhoilinh]

Is this a bug report, a feature request, or a question?

This is a question

Have you followed the required steps before opening a bug report?

(Check the step you've followed - replace the space character between the square brackets ([]) by an x.)

• [ x] I have read the guidelines regarding bug report.
• [ x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [ x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [ x] I am using the latest plugin version.
• [ x] I am following the issue template closely in order to produce a useful bug report.

---

Hi, I'm using this library to implement scrolling for carousels. I'm having one issue: The scroll animation of my carousel is not smooth, seems like it has a small delay in the middle of the animation. Here are the videos comparing my app's scroll animation vs Uber's scroll animation:

• My app: https://streamable.com/3wicn
• Uber: https://streamable.com/tp2f0

Here's my code for the carousel:

<Carousel
  ref={(c) => { this._carousel = c; }}
  data={sortedCarouselDataArray}
  renderItem={this._renderCharGroup}
  sliderWidth={sliderWidth}
  itemWidth={itemWidth}
  containerCustomStyle={styles.slider}
  contentContainerCustomStyle={styles.sliderContentContainer}
  onSnapToItem={(index) => this.setState({ swiperIndex: index }) }
  inactiveSlideScale={0.95}
  inactiveSlideOpacity={1}
  swipeThreshold={40}
/>

[bd-arc]

Hey @duongkhoilinh,

Oh, I totally get you! Unfortunately, this is a well known issue that has to do with the lack of exposed options for the ScrollView component. We've been trying to compensate for that for a long time, without much success...

You can learn more about it in #189 and #203.

[oferRounds]

hi @bd-arc thanks first of all for this great library!

I wanted to ask if there is progress/hope with this bug, as I was a bit lost on the two related threads you linked to here

Also, I wanted to ask if the scrollTo completion callback is what we’re waiting for this specific issue?

I’m asking, as more than a React Native issue, this is an iOS issue (when referring to iOS), as the native method which scrollTo is based on – setContentOffset:animated: – also doesn’t provide this kind of callback.

So I wander if there is any other way to overcome this issue (if in fact that’t the main issue related to this bug)? As if it’s not available on the native – I don’t think it will be available any time soon on RN

[bd-arc]

@oferRounds Thank you for the information regarding the native side!

Our best bet at this point would probably be #40 since it gives access to information regarding velocity. I haven't been able to dig this enough for now, but if you feel a little adventurous I'd love to hear about your tests!

[oferRounds]

Thank you @bd-arc for the answer!

Ok, but something is still not completely clear to me (I’m an iOS developer originally):
if react-native-snap-carousel extends ScrollView, which is based on the native UIScrollView (on iOS), so what could be the explanation to the fact that on native iOS (such as the Uber example here), the scroll feels perfect, but for us here – not 100%?