React-native-snap-carousel: Difficulty understand itemWidth / slideWidth props

[vTrip]

Would be great to get more clarification around the itemWidth and sliderWidth - especially relating to the examples where calculations are made with inclusions of slideWidth, slideHeight and itemHorizontalMargin

[bd-arc]

Hi! I guess you're referring to the following lines in SliderEntry.style.js:

const slideHeight = viewportHeight * 0.4;
const slideWidth = wp(75);

export const sliderWidth = viewportWidth;
export const itemHorizontalMargin = wp(2);
export const itemWidth = slideWidth + itemHorizontalMargin * 2;

Slider's width and slide's width must be defined at <Carousel /> level (props sliderWidth and itemWidth), while slide's height and slide's inner padding are up to you and should be defined at slide's level.

Anyway, there is a tiny mistake in the code above: itemHorizontalMargin shouldn't be exported since it isn't used anywhere else. Is it clearer if I rewrite those lines this way?

// Slide style
const slideHeight = viewportHeight * 0.4;
const slideWidth = wp(75);
const itemHorizontalMargin = wp(2);

// Carousel props
export const sliderWidth = viewportWidth;
export const itemWidth = slideWidth + itemHorizontalMargin * 2;

Here is a screenshot that should help you understand how each of these variables is used. Let me know if you need more info.

[vTrip]

hey @bd-arc thanks for replying so quickly.

I understand the basics of what the props are doing. However I have this issue where after I slide each 'slide', each successive slide snaps further to the left side of the carousel.

i.e. slide 1 is 20px from edge of screen.....slide to snaps to 10px from edge of screen.....slide 3 snaps to 0px from edge of screen....slide 4, 5 and so on snap further off the screen as I move through the list.

[bd-arc]

@vTrip Do not hesitate to share your code so I can take a look at it ;)

[vTrip]

@bd-arc

const slides = this.props.results[index].value.map((rowData, rowID) => this.renderCard(index, rowID, rowData) );

return ( <Carousel sliderWidth={sliderWidth} itemWidth={itemWidth} > { slides } </Carousel> )

renderCard(section, row, data) { return ( <FlightCard key={entry-${row}} lookup={false} index={row} selected={selected} detail={ () => this.setState({modalVisible: true, detailItem: data}) } select={ () => this.props.select(section, row) } unselect={ () => this.props.unselect(section) } flightSection={data} /> ) }

[vTrip]

@bd-arc for props:
sliderWidth & itemWidth I use 350 and 300 respectively.

As i scroll through the list, the offset of each card increases from the left. Leaving each successive card with a larger left margin than the previous card.

[bd-arc]

Hi @vTrip,
Sorry for the late answer, but I finally had time to work on your issue.

Good news: I was able to reproduce and fix it. I'll publish a new release in the next few days ;-)

[vTrip]

@bd-arc awesome news - looking forward to the fix !!

[bd-arc]

@vTrip I've just published version 2.2.1 that should solve your issue. Can you confirm that it now works as intended for you?

[emileNetter]

Hi I still have the same problem but only when I try to add horizontal margin between slides. Sliding through the elements shifts their position to the right each time.
I'm on Android and using the latest version of your plugin (2.3.1).
I tried to follow your example :

    const Screen = Dimensions.get('window');
    function wp (percentage) {
      const value = (percentage * Screen.width) / 100;
      return Math.round(value);
    }

    let slideWidth = wp(75);
    let itemHorizontalMargin = wp(2);

    export const sliderWidth = Screen.width ;
    export const itemWidth = slideWidth + itemHorizontalMargin * 2;

[bd-arc]

Hi @emileNetter,

Does it work if you try the example itself? Is it possible that your carousel is wrapped in a container with margin or padding?

[emileNetter]

Hi, I finally got it working. I guess I simply did react-native run-android and it worked as expected. Thank you for your time and great work by the way !

[sooyang]

hi @bd-arc,

Great screenshot there displaying the sliderWidth and the explanation.

I am trying to achieve the similar padding spacing between the slides like in example 1 but only difference is I would like the inactiveSlideScale={1} . Tried adjusting the slideStyle with paddingHorizontal but it pushes the all the slides to the right causing them to be not centered.

Any clarification regarding the padding and the scaling would be great.

Thanks in advance!

[bd-arc]

Hi @sooyang,

Typically, this means that you've updated slide's styles without adding your padding to itemWidth. Am I right? Note that the value of itemWidth must include any extra padding. Typically, it's going to be equal to custom slide width + (extra padding * 2), and is not affected by the value of inactiveSlideScale.

You can also take a look at this part of the doc.

[sooyang]

Hi @bd-arc,
Spot on!
I have read the doc before reaching out. Somehow I misunderstood the explanation on adding paddingHorizontal in the docs. Your explanation really clear things up for me. Thanks so much !

Made 2 mistakes:
i) Updating the slide's style by adding paddingHorizontal but did not account the additional padding to itemWidth
ii) Added additional paddingHorizontal to the slides's container on top of the slide's styles paddingHorizontal

Just going to add an example here on what I was looking to achieve by re-using part of the code in the docs.

const horizontalMargin = 20;
const slideWidth = 280;

const sliderWidth = Dimensions.get('window').width;
const itemWidth = slideWidth + horizontalMargin * 2;
const itemHeight = 200;

export class MyCarousel extends Component {
    _renderItem ({item, index}) {
        return (
          <View style={{width: (slideWidth + 10 * 2), height: itemHeight, backgroundColor: 'white'}} />
        );
    }

    render () {
        return (
            <Carousel
              data={this.state.entries}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
              inactiveSlideScale={1}
              slideStyle={{paddingHorizontal: 10}}
            />
        );
    }
}

In this scenario,
i) I am going for inactiveSlideScale={1} so that the inactive slides have similar height as the active slide
ii) I am going to add paddingHorizontal: 10 because thats the amount of spacing between the slides that I would like to have.
iii) After adding paddingHorizontal to the slide's style, I then have to adjust my itemWidth accordingly which can be seen at width: (slideWidth + (horizontalMargin - 10) * 2)

[bd-arc]

Thanks @sooyang for the detailed example that will certainly help others.

And you're right: the doc was missing a note clarifying that itemWidth needs to include the extra padding. I'll make sure to update it!