firstItem not working

Hey, I’m having an issue with setting firstItem. Most of the time, the wrong item is selected. We are using a function which returns the children, so we got something like this:

<Carousel
                    ref={'covers'}
                    sliderWidth={viewportWidth}
                    itemWidth={240}
                    inactiveSlideScale={0.9}
                    inactiveSlideOpacity={0.6}
                    showsHorizontalScrollIndicator={false}
                    snapOnAndroid={true}
                    removeClippedSubviews={false}
                    onSnapToItem={this.onSnap}
                    firstItem={8}
                >
                    {this.getCovers()}
</Carousel>

In our case, the 8th item wasn’t selected when the component mounts. If we do something like this:

componentDidMount() {
    setTimeout(() => { this.refs.covers.snapToItem(8,false); },500);
}

…the correct item is selected. Are there any issues when generating the childrens via function?

[balwinder4264]

 I had same problem i add initialNumToRender={100} so Carousel working fine for first . 100 items 
        <Carousel
          ref={(c) => { this._carousel = c; }}
          initialNumToRender={100}
          data={this.state.picture}
          firstItem={this.state.index}
          renderItem={this._renderItem}
         sliderWidth={500}
          itemWidth={500}
          
          //onSnapToItem={(index) => this.setState({ activeSlide: index }) }
        />
    );
}

}

[sitorush]

I just had similar issue where the carousel has long list (eg. 90 items) and set the firstItem into high number will always select the 12th item. It turns out I have to add getItemLayout in order for FlatList to figure out how long the list will be.

<Carousel
...
getItemLayout={(data, index) => ({offset: viewportWidth * index, length: viewportWidth, index})}
...
/>

I hope this helps someone else related to firstItem issue.