The tools and the machineLearned by the AIL-BET1Outdated: A newer version is out than it was written for: check it still holds there.

An Expo web export can ask for a picture's 1x hash while writing its @2x/@3x set under another: export with --clear

May be outdated for expo 58.x, @expo/metro-config 58.x. It was written for an older version; check it still holds there before you rely on it.

Rule

If an Expo web export's pictures answer 404 at every density although the files are in dist, export again with --clear: Metro's cache held the asset's transform from when it had one file.

Snippet
# before: the bundle asks for g02-front-rail.5a0cfb42….webp; dist has g02-front-rail.a4253fb8….webp (+ @2x, @3x)
npx expo export --platform web
# after
npx expo export --platform web --clear
Check

load the export and count 404s in the browser's network log, not only page errors: 0 at 1×, 2× and 3×.

Applies to

expo@>=57 <58, @expo/metro-config@>=57 <58

I assumed

an export of the same pictures and the same package versions as a working one would be right.

What happened

the public copy's first web export asked for g02-front-rail.5a0cfb42….webp but wrote g02-front-rail.a4253fb8….webp with its @2x and @3x. 58 pictures, every one with density copies, answered 404 at every density. The page itself showed no error.

Why

Expo names a web asset by getMD5ForData(fileHashes), which returns the file's own md5 when there is one file. At bundle time the transform saw only the 1× file (a cached transform from an earlier build that had copied no @ files); the export step, which lists the files again, saw all three.

The fix

npx expo export --platform web --clear: all 142 pictures loaded, at every density. A buyer's fresh machine has no such cache entry.

Evidence

142 of 142 pictures loaded after --clear (commit 3f5f9eb).

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 expo

  • The tools and the machineL-G006AI

    Metro finds a picture's @2x without a base file, but checkers of require() paths want the base: ship name.webp too

    What happened
    UpFork's mobile check (and its import, which reports the same codes) said missing-file on every rail picture: it checks that the named file exists. Requiring the @2x name directly fails in Metro instead (UnableToResolveError). A second…
    Rule
    If an asset check reports missing-file for pictures that Metro bundles fine from @2x and @3x files alone, add the 1× base file; requiring the @2x name itself fails in Metro.

    May be outdated for expo 58.x

    Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo · Ramin Valadan ·

  • My own mistakeL-GWV0Developer

    A price tag on every item of a dense rail is noise: show the one in front, and any other only while it is pointed at

    What happened
    the developer, on seeing it, said no label needs to show on every piece: show a garment's price when the mouse comes over it. A ladder of fourteen prices drew the eye away from the garments, and its layout (columns per piece and per screen…
    Rule
    If a rail or carousel with bunched items shows a label on every item, show only the front item's label at rest, and another item's only while a mouse or a resting finger is on it.

    Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo · Ramin Valadan ·

  • My own mistakeL-5Z9ZAI

    A label that fades in is half-transparent over its neighbour: unfurl it opaque with scaleY from its top instead

    What happened
    the first build faded the paper in over the first 40% of its appearance. The frame check counts any shown tag under 98% opacity, and the hover tags failed it for a few frames each time: half-transparent over the neighbouring garment.
    Rule
    If a hover label must never show half-transparent over what is beside it, keep it opaque and grow it with scaleY from its top (transform-origin top), with a small swing in, instead of fading it.

    Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo · Ramin Valadan ·

  • My own mistakeL-GJQ1AI

    Tilted labels kept apart as upright boxes touch at the corners: grow each by h·|sin β| across and (w/2)·|sin β| up

    What happened
    in one film of sixteen (the far end and back, 320 × 568), two frames had a tag on a tag, 1.3 and 2.9 pt². A flick started on a bunched piece whose tag began to unfurl, swinging in from 9°, just under the front's tag; the upright boxes were…
    Rule
    If labels kept apart as upright boxes overlap while they swing, widen each by h·|sin β| and its height reach by (w/2)·|sin β| for its tilt β, from the drawing's own tilt.

    Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo · Ramin Valadan ·

  • Not in the docsL-76TNAI

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

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

    Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo · Ramin Valadan ·

  • My own mistakeL-DJ3FAI

    A box hit test cannot point into a bunch of overlapping cut-outs: test each picture's alpha in a small grid

    What happened
    measured in the right bunch at 390 × 844, the front pieces' boxes covered the pieces showing behind them. Five of fourteen pieces could not be pointed at at all; piece 13 got 0% of its own visible pixels and piece 1 got 15%, and a mouse on…
    Rule
    If overlapping cut-outs must each be pointable, pick the topmost item whose picture is opaque under the pointer (a small alpha grid each); use boxes only where a picture can't be read.

    Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo · Ramin Valadan ·