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

On React Native Web an Animated.Image's onLoad event has no target: read the hidden img inside the image's element

Rule

If e.nativeEvent.target is missing in an Animated.Image's onLoad on the web, find the loaded React Native Web keeps inside the image's element (by testID from a parent ref) and read that.

Snippet
// before: the picture from the load event
onLoad={(e) => readOutline((e.nativeEvent as unknown as Event).target as HTMLImageElement)}
// after: React Native Web draws a picture in a div and keeps it, loaded, in a hidden <img>
onLoad={() => {
  const root = rootRef.current as unknown as HTMLElement | null;
  const holder = root?.querySelector(`[data-testid="front-${index}"]`);
  readOutline(holder?.querySelector('img') ?? null); // already loaded: nothing fetched again
}}
Check

log the grid's count of opaque cells on load: it is non-zero for every cut-out picture (with the event's target it was never read).

Applies to

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

I assumed

onLoad's nativeEvent on the web is the browser's load event, whose target is the loaded picture: React Native Web's image loader passes exactly { nativeEvent: e }.

What happened

no outline was ever read. Calling the same handler by hand with { nativeEvent: { target: img } } read it; with a real Event it did not.

Why

somewhere between React Native Web's Image and the handler (Reanimated's Animated.Image sits there), the event is passed on as a copy that keeps a plain object's fields and loses a real Event's target.

The fix

read the picture from the hidden <img> React Native Web keeps inside the image's element, found from the piece's own root by its test ID; it is already loaded, so nothing is fetched again.

Evidence

outlines read for every piece; the hover and hit checks above (commit 291065a).

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-web