Carousel renderItem is getting called multiple times

[MohitGoel9456]

carousel component render item method gets called multiple times even though the data passed to carousel has only 3 items in the array list. ScreenShot of the logs -->

Here is the sample code

renderProductItem = (item) => {
    console.log("item --",item)
    return (
        <Product product={item.item} />
    )
}

render () {
    return (
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={data}
          renderItem={(item) => this.renderProductItem(item)}
          keyExtractor={item => item.name}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={Dimensions.get('window').width/2}
        />
    );
}

[sebastianv20]

I had the same problem, but it only happened from card 1 to 5 Testing many options, I tried useScrollView = {True} and problem solved in my case.

[jeffreybenabou]

I had the same problem, but it only happened from card 1 to 5 Testing many options, I tried useScrollView = {True} and problem solved in my case.

I think this will make performance problem.. but it fix the problem

[MohitGoel9456]

It is still the same. it is causing performance issue as render methods called multiple times.

[nericode]

Same problem +1

[Gustavo-Kuze]

@bd-arc Is version 3 still being supported? We're experiencing this issue after upgrading React Native to latest version (currently 0.63.4)

[bd-arc]

@Gustavo-Kuze Unfortunately, I no longer have time to maintain the plugin and am progressively moving away from development. In fact, I've been looking for maintainers for more than a year now.

However, I worked on version 4 last year and it's a huge improvement in many aspects. I recommend that you check the beta version and post any feedback there: https://github.com/meliorence/react-native-snap-carousel/pull/678

[EnzoH8321]

Same issue as @MohitGoel9456. Rendering each item in my array list 2 - 3 times.

[luismasg]

Same issue as @MohitGoel9456. Rendering each item in my array list 2 - 3 times.

doesn't react call render twice in strict mode? maybe this is the reason.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2