What is the React Native element tree?

The React Native element tree is the hierarchy of host elements, such as View, Text and TextInput, that React has committed to the screen after rendering, together with their props and layout.

Why it matters

A React Native app has no DOM, so DOM recording does not apply. What it does have is a tree of host elements that React commits on every render. That tree is the mobile equivalent of the document: it knows every label, every input and, once laid out, every position.

Recording that tree instead of the screen is what makes semantic recording possible on mobile. It also means the recording can be masked on the device before it leaves, and translated later, because the text is real rather than baked into a bitmap.

How AnyReplay handles it

@anyreplay/react-native walks the tree React has committed on each tick and, for each host element, notes what it is and what it says, then measures where it sits on screen. There is no native module and no rebuild, so it runs in Expo Go on SDK 52+. The first frame of a screen is a few kilobytes, later frames carry only what changed, and an idle screen sends nothing. Anything with secureTextEntry and any element whose testID contains ar-mask is masked before upload, and so is every TextInput unless you set maskAllInputs: false. Details are on the React Native feature page.