Wrong position when rendering large list

[dnish]

I'm having an issue when rendering a large list and setting the firstItem to an item within the list. When I render the carousel, it suddenly looks like this:

This is how the carousel looks on a small list:

This is how I init the component:

   <Carousel
                    ref="covers"
                    data={this.getUserFiles()}
                    renderItem={this.renderCover}
                    sliderWidth={viewportWidth}
                    itemWidth={viewportWidth * 0.8}
                    inactiveSlideScale={0.9}
                    inactiveSlideOpacity={0.6}
                    snapOnAndroid={true}
                    onSnapToItem={this.onSnap}
                    firstItem={PlayerStore.playlist.currentIndex}
                    layoutCardOffset={18}
                />


const styles = StyleSheet.create({

    covers: {
        height: viewportWidth * 0.8,
    },
    cover: {
        width: viewportWidth * 0.8,
        height: viewportWidth * 0.8
    },

});

If I set useScrollView = true it is working fine again, but I want to use the FlatList component due to performance reasons. Any idea how I can fix the wrong position?

Tested on iPhone XS.

[bd-arc]

This is a well-known and unfortunate FlatList bug.

See #363 for more info. #250 seems like the only way to get rid of it...