fix(mobile): forward image props to Expo Image - #86
Conversation
|
Verification for
The full workspace test command is still blocked before the test phase because Turbo does not pass |
Image options and callbacks were landing on the layout wrapper instead of the native image, so contentFit, contentPosition, transition, recyclingKey and the load callbacks were silently dropped at every call site. Renders a single Expo Image so anything the caller passes reaches the component that owns it. The API blurhash moves onto `placeholder`, which is where expo-image expects it, since one source can't carry both `uri` and `blurhash`. Caller-provided placeholders, placeholderContentFit and cache policies still win, and memory-and-disk stays the default. Claude-Session: https://claude.ai/code/session_01VfiCAFzqYFLkBWfQuQWCvK
0c75d63 to
60f0f1f
Compare
|
Rebased onto
With Also |
Summary
Image options and callbacks were landing on the layout wrapper instead of the native image, so
contentFit,contentPosition,transition,recyclingKeyand the load callbacks were dropped at every call site. Rendering one Expo Image fixes it.Details
placeholder, where expo-image expects it: one source can't carry bothuriandblurhash. Caller-provided placeholders,placeholderContentFitand cache policies still win, and memory-and-disk stays the default.contentFitso it doesn't crop differently from the photo that replaces it.styled(Image)with width, height and border-radius, all of which expo-image applies itself, so theoverflow: hiddenwrapper wasn't buying anything.main. The old branch also had averify:image-propstsx script that ran nowhere in CI; that's now three jest suites, whichpnpm testpicks up on every branch push.Proof
720x240 image in a 150x150 box on an iPhone 17 Pro Max simulator, Release build.
containkeeps all four colour bands,covercrops to the middle two. Top row ismainwithcontentFit="contain"then"cover", identical because both were dropped. Middle row is this branch, same two props, honoured. Bottom row iscontentPositionleft then right.Testing steps
pnpm --filter @pegada/mobile test(12 tests).Image.test.tsxrenders the component withexpo-imagemocked and asserts the props arrive on it; drop the{...props}spread and both of its cases fail.