Problem on re-rendering of component, setting a new firstItem index

I have several miniComponents listed in my carousel and a user can select and deselect these miniComponents on different screens to be visible in the carousel or not. Removing and adding them works splendidly (the miniComponents.map function below).

So an actual rerendering is on this page with the Carousel happening.

But if remove one of the miniComponents, my activeMiniCompIndex might chance as components now move to different positions. I set in firstItem the activeMiniCompIndex, the Carousel stays however on the same position. I checked via console.log output that the activeMiniCompIndex is changing and that a rerender is executed in the component containing the carousel, however the carousel is not.

<Carousel
            ref={carousel => {
              this._carousel = carousel;
            }}
            firstItem={activeMiniCompIndex}
            sliderWidth={Dimensions.get('window').width}
            itemWidth={Dimensions.get('window').width * 0.75}
            scrollEndDragDebounceValue={0}
            inactiveSlideOpacity={0.8}
            contentContainerCustomStyle={S.carouselContainer}
            onSnapToItem={index => {
              this.activeMiniCompKeyStorage.set(miniComponents[index].key);
              if (index !== activeMiniCompIndex) {
                tracker.trackEvent('miniComponents', 'scrollTo', { label: miniComponents[index].name });
                this.setState({ activeMiniCompKey: miniComponents[index].key });
              }
            }}
          >
            {miniComponents.map((miniComponent, index) =>
              <View key={index}>
                {this.renderContent(miniComponent)}
              </View>
            )}
</Carousel>

I checked your documentation and past issues, unfortunately I couldn’t find a solution to this problem.

Thank you in advance for your help!

[bd-arc]

Hi @KevKo1990,

Just a quick thought, but does it work if you add extraData={this.state} to the <Carousel />? (from FlatList’s doc)

And if it doesn’t, can you set up a simple test case so I can easily reproduce the issue?

[bd-arc]

Hey @KevKo1990,

You can either copy/paste the raw code, like you did, or reference the commit in your package.json file:

"react-native-snap-carousel": "https://github.com/archriss/react-native-snap-carousel#f38ef07"

and then run npm install or yarn depending on what you’re using.

Regarding the issue, what you’re showing is the expected behavior: if you remove an item, the closest one becomes active. And, as I’ve previously mentioned, since the callback is not fired the Pagination component won’t automatically update and will fall back to its default value (0).

I think that it’s a little dangerous to always go back to the first item if the current one is deleted. Imagine a list of hundreds of items; it would result in a pretty bad user experience.

What would be the best behavior in your opinion?