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.

[bd-arc]

@knyuwork By setting removeClippedSubviews to false you basically get rid of all the FlatList optimizations and load every single one of your items at once.

This is not a problem if you only have a few of them, but this might become a real issue otherwise.

By the way, you could just set prop useScrollView to true instead of going the removeClippedSubviews route.

Unfortunately, this is a pure RN bug on which we have absolutely no control. In fact, we’ve been trying to compensate for those bugs for years without any luck…

[ramaguduri]

+1