react-native-snap-carousel: firstItem doesn't work reliably

@thekevinbrown Hi, I have the same issue, i resolve this in use initialNumToRender={data.length}, but i slow performance

@thekevinbrown Did you pass to the Carousel component the relevant getItemLayout & initialScrollIndex properties for your use-case? for example:

          firstItem={this.props.firstSlideIndex}
          initialScrollIndex={this.props.firstSlideIndex}
          getItemLayout={(_: ListItemData, index: number) => ({
            length: CARD_WIDTH,
            offset: CARD_WIDTH * index,
            index,
          })}

The branch just enables usage of them, so using the branch without implementing the props wouldn’t make any change. I haven’t tested your snack specifically but I’ve reproduced exactly the same issue and now it’s resolved also in my production environment on bigger lists. LMK how it goes

I have found a workaround for this issue (applied to bug report demo for horizontal carousel):

contentContainerCustomStyle={{
  minWidth: windowWidth * data.length
}}

This allows the initial scrollTo to get to where the initial slide should be in the scrollview content container by making it wide enough initially.

Hello @kganser I’ve tried your solution, it does work. But I got a new problem, the active card is not aligned center with changing width enough for contentContainerCustomStyle. The active card should be expected to align at center, but it aligns at left. Have you encountered that problem? I’ve tried a lot of styles, but didn’t resolve my issue. Any suggestion will be appreciated!

Here’s my code to use Carousel, sliderWidth equals to the window width

<Carousel
        data={dataSource}
        renderItem={this.renderItem}
        sliderWidth={sliderWidth}
        itemWidth={itemWidth}
        firstItem={activeIndex}
        inactiveSlideScale={0.95}
        inactiveSlideOpacity={1}
        removeClippedSubviews={false}
        contentContainerCustomStyle={{
          minWidth: sliderWidth * dataSource.length,
        }}
      />

Just got rid of the getItemLayout and initialScrollIndex override in version 3.8.3. Using these props should help you all get rid of the issue.

Keep me posted!

Hello, I had used snapToItem method in onLayout callback FIRST_ITEM = “SOME_VALUE” <NavigationEvents onDidFocus={() => { const { idx} = this.props.data; this.setState({ sliderActiveIndex: idx }); FIRST_ITEM = idx; this._slider1Ref.snapToItem(FIRST_ITEM); }} /> … <Carousel ref={c => (this._slider1Ref = c)} data={this.state.images} renderItem={this._renderItem} sliderWidth={wp(“100%”) - 8} itemWidth={wp(“100%”) - 16} activeSlideAlignment={“start”} inactiveSlideScale={1} layout=“default” onLayout={() => { console.log(“hello”); this._slider1Ref.snapToItem(FIRST_ITEM); }} />

I have found a workaround for this issue (applied to bug report demo for horizontal carousel):

contentContainerCustomStyle={{
  minWidth: windowWidth * data.length
}}

This allows the initial scrollTo to get to where the initial slide should be in the scrollview content container by making it wide enough initially.

I strongly advise against initialNumToRender={data.length} since you will encounter critical performance issues.

The reasons why getItemLayout and initialScrollIndex were overridden in the first place have been explained in #193 and boil down to the fact that FlatList was (and still is) very buggy.

To be honest, I’d be pretty happy to finally get rid of the override!

Before that, can each one of you try @rtalwork’s PR #547 and tell me if they experience any side effect?

Today, I faced the same issue. The first time doesn’t work properly except less than 15 index number. I have had a long list of items and I set to lets say 50th item and it showed me 10th index number

Hi, i confirm is better at 60%, but not 100% perform but i have a complexe component inside carrousel. to better performance in my renderModalCarrousel i have added this.

renderModalCarrousel({item, index}){ if( index==this.state.activeIndex || index==this.state.activeIndex+1 || index==this.state.activeIndex-1 ){ return (<MyComplexComponent />); } else { return null; } }

and my new carrousel

<Carousel
 ref={(c) => this._carouselActu = c}
 data={this.state.contentActu}
 renderItem={this.renderModalCarrousel.bind(this)}
 firstItem={this.state.activeIndex}
 initialScrollIndex={this.state.activeIndex}
 getItemLayout={(data, index) => (
	 {length: width, offset: width * index, index}
 )}
 initialNumToRender={1}
 maxToRenderPerBatch={1}
 sliderWidth={width}
 itemWidth={width}
 removeClippedSubviews={true}				
 onBeforeSnapToItem={(activeIndex) => {
	 this.setState({activeIndex:activeIndex, showWebSite:false, isLoadWebView:false, indexArticleOpen:0});
 }}
/>`

That’s a workaround we could definitely try @gh974, but I’m hoping that as flatlist is a virtual list that we don’t have to resort to rendering everything ever, or it’ll cause some really terrible performance in our use case. There are sometimes a lot of items.

I got it working in my app by replicating what @GH974 did. Will leave this open until there’s a PR to fix it in the core carousel.