Slider shift when item clicked

[lsps9150414]

The slider shift when item is clicked.

Here's my code:

const SLIDER_WIDTH = Dimensions.get('window').width;
const SLIDE_ITEM_MARGIN = 35;
const SLIDE_ITEM_WIDTH = SLIDER_WIDTH - (SLIDE_ITEM_MARGIN * 2);

      <Carousel
        sliderWidth={SLIDER_WIDTH}
        itemWidth={SLIDE_ITEM_WIDTH}
        style={{ paddingHorizontal: 0 }}
      >
        {this.renderMedicationCards(this.props.medications)}
      </Carousel>

This does not happen when I set my SLIDE_ITEM_MARGIN to 0, which is setting SLIDE_ITEM_WIDTH = SLIDER_WIDTH = Dimensions.get('window').width

[bd-arc]

@lsps9150414 Hi! Thanks for providing an animated screenshot; that really helped clarifying the issue. What's happening there is that the ScrollView is scrolled past its bounds because you've overridden the carousel container's style with style={{ paddingHorizontal: 0 }}.

First, you need to make sure to use the prop containerCustomStyle whenever you want to style carousel's container.

Then, you should never override the horizontal padding of both ScrollView's container and ScrollView's content container. As you can see in the source code, this is a critical value which allows for slide centering. If you need horizontal padding around the carrousel, I suggest that you wrap it inside a View component that you can style according to your needs.

Hope that helps! Let me know if this solves the issue for you.

[lsps9150414]

@bd-arc Thanks for the fast reply!

It seems to be some other reason causing the problem. I've removed any styles attached to Carousel. Not style nor containerCustomStyle. It still happens.

[bd-arc]

@lsps9150414 I still think that the issue probably has to do with a faulty padding's calculation. Something might have changed with recent versions of React Native. Which version are you using and on which OS are you testing?

This is working properly for me with versions 0.38 to 0.41 of RN, on both iOS and Android. So I'm confident that we can find a solution to your issue ;)

[lsps9150414]

It turns out to have something to do with enableMomentum. Using your example, when I set it to false same thing happens. I haven't got time to dig into the src code to figure out the problem.

[bd-arc]

@lsps9150414 This is really surprising as we are using it with enableMomentum equally set to false or true without any issue.

Can you tell me the version of React Native you are using as well as the OS on which you have tested the behavior ?

[lsps9150414]

The above demo is RN 0.38, on mac simulator iPhone 6 iOS v 9.3.

[bd-arc]

@lsps9150414 Hi! I've tried the current example with the same configuration as yours (on both emulator and real device), and I wasn't able to reproduce the issue you're facing...

Could you download this version of the example, freeze plugin's version to 1.4.0 and see if that does anything for you?

[bd-arc]

@lsps9150414 Would you mind trying with the latest version of the plugin and tell me if you can still reproduce the issue?

[bd-arc]

Closing as the issue should be resolved in version 2.1.1.
Feel free to reopen if needed.

[darkhorse-coder]

This issue is appearing again. when I click items (not first and end), getting left swift.

below my code:

<Carousel ref={carouselRef} sliderWidth={width} data={pages} renderItem={renderPage} itemWidth={width - 56} onSnapToItem={onChangeSlide} inactiveSlideScale={1} pagingEnabled firstItem={type - 1} />