Why we use the removeClippedSubviews property in the View component in react-native?

Question

Why we use the removeClippedSubviews property in the View component in react-native and what it does? The documentations says that:

This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).

The documentation doesn't seems to be understandable. Can anyone explain with a small example?

Answer 1

Setting removeClippedSubviews to false fixes a terrible issue where the Android keyboard dismisses if you use a TextInput within a FlatList, and the TextInput tapped on is beneath the soon-to-be keyboard region.

(I even reproduced this in a React Native docs example, I just ran an example on a virtual android and changed the Text to TextInput.)

I presume that the subviews about to be under the keyboard are getting removed because they are about to be clipped by the keyboard, causing the keyboard to leave instantly because the TextInput is no longer rendered.

So there's one (in my case) crucial use for the property, at least on a FlatList.

Answer 2

You need to first understand the concept of clipping views Clipping views means selective views that are shown based on some logic for example

if(this.state.status === true){
return(<View style={{backgroundColor:'red'}}/>)
}else{
return(<View style={{backgroundColor:'green'}}/>)
}

in the above example we have two views red and green but only one of them will be shown at a time based on status, this is what is known as clipped views

Now coming back to your question removeClippedSubviews property will reset or remove all the clipped views that will free some space

Note :- Explanation was based on my personal understandings from different forums that I don't even have references to, You can dig this topic a little more and provide source for me too as I'm also learning Thank you :)