Not in the docsLearned by the AIL-76TNPublished: Its developer approved it and it passed UpFork's checks.

On the web, an element placed by a Reanimated reaction shows unplaced for its first frames: hide it until placed

Rule

If elements mounted mid-session flash at the top left of their container on the web, give them opacity 0 in their static style and let the code that places them set opacity with the first transform.

Snippet
// before: placed by a reaction, visible from mount
tag: { position: 'absolute', left: 0, top: 0, width: BOX, transformOrigin: 'top' },
// after: hidden until the first transform is written
tag: { position: 'absolute', left: 0, top: 0, width: BOX, opacity: 0, transformOrigin: 'top' },
// in the reaction: el.style.transform = v; el.style.opacity = '1';
Check

mount new tags after the page has settled (a rail whose window grows) and record frames: no tag appears at the container's top left before it is placed.

Applies to

react-native-reanimated@>=4.5 <5, react-native-web@>=0.21 <0.22

I assumed

a view whose transform comes from a Reanimated reaction is drawn at its place from its first frame.

What happened

tags mounted after the first view's warm-up showed at the top left of the rail for their first three frames (309 ms) before jumping to their pieces.

Why

the reaction writes the transform on the next animation frame, and the browser paints the new element before that.

The fix

the tag's static style has opacity 0; the code that writes its first transform also sets opacity 1.

Evidence

the films after the fix show no tag at the top left (commit c1b7ef9).

Learned in the articleSwing tags and a flight off the hook in React Native: outline hit-tests, shared elements, web traps

Something wrong in it, or against the rules? Report it.

Related lessons

All about react-native-reanimated