Automatically remove unnecessary backgroundColor to reduce overdraw

[bogas04]

On Android, GPU overdraw issues can cause a lot of performance regression. React Native apps are also plagued by it. Usually the fix is to reduce nesting of layouts, and to remove unnecessary background colors. While this may be possible for a small app, as an app grows it is hard to maintain. I mean it isn't realistic to open GPU debugger on an emulator each time you add a 'backgroundColor' property.

In fact, even the default code in a fresh new react-native app suffers from GPU overdraw. This is mainly due to the transparent ImageBackground and setting backgroundColor twice.

rGPs-UvDs0uGa7rs.mp4

Here you can see how completely legitimate way of ensuring a dark and light mode logic is enough to cause a GPU overdraw.

• How does one solve this without having to test each and every screen and play with all the backgroundColors present in a screen?
• Do you think react-native could scan a component tree to determine which backgroundColors are redundant and in fact even remove those? Something like Hermes for layout?
• If not at build/run-time, do you think it's possible to have a linter for same to detect potential GPU overdraws through static code analysis?

[cortinico]

Thanks for pointing out @bogas04 and also for providing a video to explain the issue.

On Android, GPU overdraw issues can cause a lot of performance regression.

That's true but I would also like to point out that the performance impact of overdraw are not considered a significant problem anymore. Therefore we decided to focus our effort on other initiatives that providing more benefits.

Note: Overdraw is no longer as significant a problem as it was when discussed in Google I/O performance sessions, and performance pattern videos. This is because low-end devices have continued to grow in GPU performance, while their displays have plateaued at relatively low resolutions. Unless optimizing for a known low-performance GPU device, it's recommended to focus on optimizing UI thread work instead to ensure smooth app performance. In addition to this, OS optimizations avoid overdraw within your app in many cases (for example, a Fragment background overdrawing the window background).

From https://developer.android.com/topic/performance/rendering/overdraw#understanding