What is overdraw on Android devices, and how does it affect rendering smoothness?

Short answer

Overdraw occurs when the system draws the same screen pixel multiple times in one frame because unnecessary colored backgrounds accumulate in nested <View> containers, wasting GPU power.

Explanation

Enable "Show GPU Overdraw" in Android developer options. Blue indicates one draw (excellent), green two, and pink or red three to four (poor). To fix it, remove backgroundColor from inner containers and rely on the main container's background.

Code example

// Bad pattern that causes high Overdraw:
// <View style={{ backgroundColor: '#fff' }}>
//   <View style={{ backgroundColor: '#fff' }}>
//     <View style={{ backgroundColor: '#fff' }}><Text>Text</Text></View>
//   </View>
// </View>

// Good, optimized pattern: one background only
<View style={{ backgroundColor: '#fff' }}>
  <View>
    <View><Text>Text</Text></View>
  </View>
</View>

Common mistakes

• Setting an explicit background color on every layer of nested components inside cards and lists.

Follow-up questions

• How do you improve app startup time (Time to Interactive, TTI)?

Sources

• Android Developers — Debug GPU overdraw