Carousel with dynamic data

[egvrcn]

I'm using your carousel project. I wanted to bind 1000 items to carousel.
My code works, but when i update state of carouselData, app is waiting almost 10 seconds.
This wait is so long for user experience.
And carousel strange behaviour. Like this video.
I want to pass one by one.
How can i fast update data.
I bind data like this on onSnapToItem event:

<Carousel
             ref={(c) => { this.carousel = c; }}
             data={this.state.carouselData}
....
 onSnapToItem={(index) => {
    if(index%4==0)
    {
          const lastArr = this.arrContent.slice(index + 1, index + 6);
          this.setState({
                           carouselData: [...this.state.carouselData, ...lastArr]
           });
     }
}

[bd-arc]

Hi @egvrcn,

Regarding the "strange" behavior on Android, make sure to read this really important note.

Regarding the performance of the carousel, note that the component is basically a FlatList. There are flaws with React Native's implementation, as you can see by looking at the dedicated issues. I recommend that you take a look at these and see if users have come up with workarounds.

One thing that might help you though: FlatList inherits a prop onEndReached from VirtualizedList. It would probably be better if you load additional chunks of data only when the user has reached the end of the current set.

[bd-arc]

Other things you should try:

1. Implement shouldComponentUpdate for the renderItem component or, better yet, make it a PureComponent.
2. Make sure FlatList is not a child of ScrollView as the latter will render all child components, even those not on the screen in FlatList.
3. Add prop removeClippedSubviews to FlastList so it removes items out of view

[egvrcn]

Thanks for answer @bd-arc . I did 2 and 3 solutions. It works better.

1. I used onEndReached method for fetch new items. It is slowing down when execute onEndReached. I cant understand why is slowing.
2. I cant use shouldComponentUpdate for renderItem. Can you give me a sample about shouldComponentUpdate?

[bd-arc]

@egvrcn shouldComponentUpdate is part of the shallowCompare addon. You can find an example usage in the source code of this very plugin ;-).

Note that it shouldn't be needed if you use PureComponent.

[egvrcn]

I have tried to use shouldcomponentupdate and purecomponent.
According to my observations shouldcomponentupdate faster than purecomponent.
But still some delay exists.
Flatlist should be fixed for android.
Thanks for everything @bd-arc

[bd-arc]

@egvrcn You're welcome! Thanks for the feedback on shouldComponentUpdate by the way.

I'm going to close the issue because there is only so much we can do about it. Let's follow FlatList's evolution closely and post any meaningful update to this thread ;-)

I'll make sure to add everything we've shared so far to the doc; it can prove useful for other users.

[SaraChicaD]

The issue I'm getting with dynamic data is that I'm trying to always have a set of 3 items, swap out the first and last, but then Carousel never recognizes that there are more than 3 items in the array.

Does anyone have an example of how they solved this or got around it?

So I have this: data = [first, second, third] and I have logic that's constantly updating all three images, but the Carousel will only ever let me swipe to the 3 items.