Repository navigation
Android repaints the whole React root for a change to any view, so every caret blink redraws the whole screen #59534
Description
Description
ReactViewGroup sets clipChildren = false on every view (ReactViewGroup.kt). Android then leaves each child's render node unclipped (View.java), and HWUI treats an unclipped node's damage as unbounded (RenderNode.cpp). So a change to any view under a React root repaints the root's whole bounds: each blink of a TextInput caret redraws the whole root, the whole screen in an edge-to-edge app, where a native field's blink redraws the field.
What this costs is the fill: every pixel of the root, for every change to any view. I couldn't measure a frame-time cost beyond that on the two Snapdragon phones I tried. With the field inside a parent that clips its children (the reproducer's verify/clip-children branch), each blink repaints only the field, and the frame after the caret's 500 ms pause finishes no sooner, because there it waits for the GPU to wake from idle either way.
Steps to reproduce
- Build the reproducer's release APK and install it on a phone:
cd ReproducerApp/android && ./gradlew assembleRelease && adb install -r app/build/outputs/apk/release/app-release.apk. The emulator repaints its whole window for every app, so it shows no difference. - Open the app and leave it untouched while the caret blinks.
- Record six seconds with the reproducer's
caret.pbtxt:adb shell perfetto -c - --txt -o /data/misc/perfetto-traces/caret.pftrace < caret.pbtxt, then pull the trace and open it in https://ui.perfetto.dev. - Each caret frame's
Drawing <left> <top> <right> <bottom>slice on the app'sRenderThreadis the whole window. Recorded the same way, Android's Settings search (adb shell am start -a com.android.settings.action.SETTINGS_SEARCH) repaints its search field.
Expected: a caret blink repaints the caret's area, as Settings' search field does.
Actual: each caret frame redraws the whole window (step 4).
React Native Version
0.88.0
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of npx @react-native-community/cli info
System:
OS: Windows 11 10.0.26300
CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor "
Memory: 156.06 GB / 255.67 GB
Binaries:
Node:
version: 26.12.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.22
path: ~\AppData\Roaming\npm\yarn.CMD
npm:
version: 12.2.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "33"
- "35"
- "35"
- "35"
- "36"
- "37"
Build Tools:
- 35.0.0
- 36.0.0
- 36.1.0
- 37.0.0
System Images:
- android-26 | Google APIs Intel x86_64 Atom
- android-28 | Google APIs Intel x86_64 Atom
- android-29 | Google APIs Intel x86_64 Atom
- android-30 | Google APIs Intel x86_64 Atom
- android-31 | Google APIs Intel x86_64 Atom
- android-32 | Google APIs Intel x86_64 Atom
- android-33 | Google APIs Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-35 | Google APIs Intel x86_64 Atom
- android-36.1 | Google Play Intel x86_64 Atom
- android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
- android-37.0 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-262.9437.185.2621.16467767
Visual Studio: Not Found
Languages:
Java:
version: 17.0.20.1
path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli":
installed: 20.2.0
wanted: 20.2.0
react:
installed: 19.3.0
wanted: 19.3.0
react-native:
installed: 0.88.0
wanted: 0.88.0
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
No crash. RedMagic NX809J, Android 16, six seconds of each, the RenderThread's Drawing slices:
the reproducer Drawing 0 0 1216 2688 12 of 12 caret frames, the whole window the React root fills
Settings search Drawing 228 146 1148 263 10 of 12 caret frames, the search field
MANDATORY Reproducer
https://github.com/YevheniiKotyrlo/rn-whole-root-repaint-repro
Screenshots and Videos
One caret blink with Developer options › Show GPU view updates on, in the reproducer (left) and in Settings search (right), on the RedMagic:
Frame tables for both branches on a Galaxy S23 and the RedMagic are in the reproducer's README.
Activity