React-native-snap-carousel: Loop and firstItem parameters doesn't work together

[zupodaniel]

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

Bug Report

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.

Have you made sure that it wasn't a React Native bug?

It seems to be an plugin implementation bug.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both Platforms

Is the bug reproductible in a production environment (not a debug one)?

Both environments

Environment

"react": "16.5.0",
"react-native": "0.57.1",
"react-native-snap-carousel": "3.7.5",

Using scrollview implementation or flatlist

Expected Behavior

The first banner to appear in the screen must be the one at the index 0 or any configured with firstItem parameter.

Actual Behavior

Carousel starts showing the central banner of the array and ignores any argument used in firstItem parameter.

Sample Code

<Carousel
                              data={this.state.bannerList}
                              renderItem={({item, index}) => {
                                  return (<BannerCarrouselItem item={item}/>)
                              }}
                              sliderWidth={this.windowWidth}
                              itemWidth={this.windowWidth}
                              inactiveSlideOpacity={1}
                              inactiveSlideScale={1}
                              useScrollView={true}
                              loop={true} />

https://snack.expo.io/@calindratech/carousel-loop-vs-firstitem

Steps to Reproduce

The first render of the component is already enough to reproduce this behaviour.

[bd-arc]

@zupodaniel Can you please provide a Snack example in which the issue can be reproduced?

[zupodaniel]

Of course, I thought it was too simple to make a snack.

https://snack.expo.io/@calindratech/carousel-loop-vs-firstitem

[bd-arc]

@zupodaniel I'm not sure that I've properly understood the issue at stake.

I've tried to reproduce it, but I don't see any conflict between the loop and firstItem props.

[zupodaniel]

The default firstItem is equal to 0 and in the snack I sent to you is possible to see that the first image to open is the 3rd

[bd-arc]

@zupodaniel The problem has nothing to do with the plugin. You used this.windowWidth for props sliderWidth and itemWidth while never defining it.

Here is a working example with a proper value set: https://snack.expo.io/BJtCR0hq7

Still, there is apparently another issue with your example since the snap effect doesn't occur...

[zupodaniel]

I understand your point, these vars was only in my production code and I made a mistake creating the snack. My real code does not have this undefined. ASAP I'll check and create another proper example of the problem.

[zupodaniel]

I noticed that the error is occurring when I call a setState to update the data used as input of the carousel. My bannerList is generated by a http request to a server.

I made changes to the first snack using your sample and included a timeout simulating the change of state by http.

When I use the real data directly in the constructor the carousel opens at the correct position.

https://snack.expo.io/@calindratech/carousel-loop-vs-firstitem

[atulmy]

This stills seems to not work.

[phonganhhung9xtb]

+1, when set loop = true, first item rendered incorrect!