The whole Carousell component can be disappeared due to removeClippedSubviews in FlatList

Is this a bug report, a feature request, or a question?

bug report

My Component is like this:

 renderItem = ({ item }) => {
    const { value } = this.props
    if (item === 'overall') {
      return (
        <View style={styles.container}>
          <Text>{value}</Text>
        </View>
      )
    } else {
      return (
        <View style={styles.chartContainer}>
  
        </View>
      )
    }
  }

render() {
  const data = ['overall', 'chart']
  return (
          <Carousel
            data={data}
            renderItem={this.renderItem}
            keyExtractor={keyExtractor}
            sliderWidth={SCREEN_WIDTH}
            itemWidth={SCREEN_WIDTH - 24}
          />
  )
}

Problem

In the above code, this.props.value comes from redux store

Whenever this.props.value is updated, the entire Carousel component will be disappeared.

Solution

I have traced the code and I found that _getComponentOverridableProps in Carousel.js contains removeClippedSubviews: true. After I removed this props, The problem is gone.

And I also referenced to FlatList.

There is a note under removeClippedSubviews:

Note: May have bugs (missing content) in some circumstances - use at your own risk.

Just to share my findings.

Start in Carousel.js at _getComponentOverridableProps and reproduce the disappearance when a Redux-sourced value updates in a FlatList-based carousel with removeClippedSubviews enabled. Compare the behavior with that prop removed and determine a verified fix or documented limitation; done means the whole carousel remains visible after the update.