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

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

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

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.

Snippet
// before: only the 2x and 3x copies on disk, required by the base name
const rail = require('../assets/garments/g01-front-rail.webp'); // Metro finds the 2x copy; a checker does not
// after: assets/garments/g01-front-rail.webp beside its 2x and 3x copies (also right for 1x screens)
Check

run the product's checker (here UpFork's mobile kit check, npm run check): no missing-file report; the web export loads every density.

Applies to

expo@>=57 <58, other: UpFork's mobile kit and import (2026-11)

I assumed

a 2× and a 3× picture with no 1× file were enough: require('x.webp') resolves to the @2x copy in Metro, and the web export built.

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 report, demo-export, came from generated data kept under demos/, which the rule reads as screens.

The fix

the export writes the 1× file beside the 2× and 3× files, and the demo data moved to lib/demo-garments.ts.

Evidence

the check passed: no rule problems, no type errors, 444 KB of JavaScript gzipped (commit ac5146e).

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

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

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

    May be outdated for expo 58.x, @expo/metro-config 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 ·