Choppy behaviour on iOS when slide's width is small

[alialaa]

I am having a situation where I want to use the carousel to act like an option picker, the user will swipe to choose a certain option. so I am having a slide width of 80 and the width of the slider is the same as the device width. It's working pretty well on android however it's acting very weird on iOS. it may not be clear here but it's even choppier on an actual device.

Android

iOS

[bd-arc]

@alialaa Hi! Could you tell me which version of the plugin you're currently using? Also, can you try to set enableMomentum to false and see if that improves the behavior?

[alialaa]

@bd-arc Hey, I am using 2.0.3 and I think enableMomentum is false by default, I tried setting it to true it got even worse that it won't even change the slide at all.

[bd-arc]

@alialaa I must admit that we didn't create this plugin with small slides in mind, which means we might need to adjust a few things for this use case. I will take a look at it shortly and keep you posted.

[alialaa]

@bd-arc thanks a lot, please update me even if it can't be done so that I can find another solution.

[bd-arc]

@alialaa Hi! I've just published a new version (2.1.0) that exposes a previously private property: activeSlideOffset.

Setting a smaller value than the default 25 should resolve your issue. Can you please confirm?

[alialaa]

@bd-arc Hey, this was useful but I don't think it's what was causing my issue, I am posting you an actual video to illustrate the issue a bit more accurately. as you can see the slide is set to active when it has a 100% opacity but when I release my hand some weird bouncing animation happens.
snaptest.mp4.zip

[bd-arc]

@alialaa Thanks for the video; it helps clarifying the issue.

If this is not too much trouble, could you create a basic React Native project with your picker? Nothing fancy, just the carousel implementation and your styles. I would then use this as a starting point to investigate further.

[alialaa]

@bd-arc Ok I'll do it next week, thanks a lot.

[delvedor]

Hello, same issue here!

• React Native version: v0.42.0
• react-native-snap-carousel: v2.1.0

The size of a slide is:

• 200 width
• 100 height
• 15 margin horizontal
• 5 margin vertical

As above, enableMomentum didn't solve the problem and activeSlideOffset either.

[alialaa]

@bd-arc @delvedor When I created a project from scratch surprisingly the carousel worked just fine, so probably it's something in my other project. I will let you know if I figured it out. Thanks for your time.

[delvedor]

@alialaa can you past the code you used in the new projetc?

This is mine:

    const slides = elements.map((entry, index) => {
      return (
        <View key={index} style={{
          backgroundColor: colors.white,
          height: 100,
          width: 200,
          marginHorizontal: 15,
          marginVertical: 5,
          padding: 10,
          borderRadius: 5,
          shadowColor: '#000',
          shadowOffset: {
            width: 2,
            height: 3
          },
          shadowOpacity: 0.2
        }}>
          <ProximaText>{entry.title}</ProximaText>
          <ProximaText>{entry.location.name}</ProximaText>
          <ProximaText>{entry.time}</ProximaText>
        </View>
      )
    })

    return (
      <Carousel
        sliderWidth={windowWidth}
        itemWidth={230}
        inactiveSlideScale={1}
        showsHorizontalScrollIndicator={false}
        removeClippedSubviews={false}
        containerCustomStyle={{
          position: 'absolute',
          bottom: 20
        }}
        >
        {slides}
      </Carousel>
    )
  }

[alialaa]

@delvedor
index.ios.js.zip

[delvedor]

Thanks!
I found that if I wrap the Carousel in this way:

<View style={{ flex: 1, alignItems: 'center' }}>
  <Carousel />
</View>

The problem disappear (but in my case disappear the Map component as well :P)

---

Edit:
I found that the bug appears when I add the react-native-maps component:

<View style={{ flex: 1 }}>
  <Map />
  <Carousel />
</View>

@bd-arc any idea? :)
related: #11

[bd-arc]

@alialaa Thanks for letting me know ;)

@delvedor I assume that you're trying to recreate something along the lines of our map implementation, aren't you? :) There might be a touch handling conflict between the two components. One thing you should know is that our Carousel component is wrapped in a Modal component. Could you try to do the same and see if that helps with the issue? Then we can take a closer look at Modal's specifics and see if we can improve our plugin.

[delvedor]

Oh, I see!
Just to understand better, you have something like this?

<View style={{ flex: 1 }}>
  <Map />
  <Modal position='bottom' isOpen>
    <Carousel />
  </Modal>
</View>

[bd-arc]

@delvedor Absolutely.

[delvedor]

Perfect, now I give it a try and I let you know, thanks!

[delvedor]

Nope, same issue :S

render () {
    return (
      <View style={{ flex: 1 }}>
        {this.renderMapOrSpinner()}
        <Modal
          position='bottom'
          isOpen
          backdrop={false}
          swipeToClose={false}
          style={{
            backgroundColor: 'rgba(0,0,0,0)',
            height: 130
          }}
        >
          {this.renderCarousel()}
        </Modal>
      </View>
    )
  }

If I remove the map element, the carousel works perfectly.

---

Edit:
Are you using https://github.com/airbnb/react-native-maps ?

[bd-arc]

@delvedor Yes, we're using the AirBnb plugin. It's broken in many ways, but there are no real alternatives at the moment :(

Could you try with the backdrop prop enabled?

[delvedor]

@bd-arc I know :S
By the way, nothing changed with backdrop prop enabled.

[bd-arc]

@delvedor Then I'm currently out of ideas :-)
Could you create a simple React Native project that would allow me to reproduce the issue and investigate?

[delvedor]

At the moment I cannot create it, if you want we can talk in private (mail?).
In this way I can tell you a little bit of my configuration and if we solve the issue we can update here :)

[bd-arc]

@delvedor Let's do that. You can reach me at [email protected]. Make sure to include everything that could help me reproduce the issue. A zip file of your project including only the relevant components (stripped from any sensitive data) would clearly come in handy ;-)

[bd-arc]

@delvedor Hi! Unless I'm mistaken, I haven't heard from you yet. Are you still facing the issue?

[bd-arc]

Closing as no further feedback was provided.

[delvedor]

Hi!
Sorry for the delay, but in this period I'm working a lot! :P
I've tried my app on a physical device and this "choppy" behaviour It's disappeared, while there is still in the simulator, so probably is something related to the simulator itself.

If something changes I let you know, thank you for your help and patience.

[bd-arc]

@delvedor Thank you for letting me know. Do not hesitate to ping me if the issue comes back ;)