Choppy behaviour on iOS when slide's width is small

[meliorence]

Choppy behaviour on iOS when slide's width is small

[bd-arc]

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

[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.