Open element photos full screen with pinch-to-zoom - #64
Merged
Conversation
The detail screen's photo strip was the only place a photo could be seen, and at 200x140 that's too small to make out anything in it. Tapping a thumbnail now opens it full screen where it can be zoomed and panned. Gestures are hand-rolled on PanResponder + Animated. ScrollView's pinch-zoom props are iOS-only so there was no built-in path, and pulling in gesture-handler + reanimated — two native modules — for one screen's zoom is a worse trade than ~150 lines of touch handling. The transform geometry is split into photoZoom.ts so it can be tested without a renderer, leaving the component to only translate touches into it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Photos on the element detail screen were only ever visible as 200×140 thumbnails. They're now tappable and open a full-screen viewer:
Notes
PanResponder+Animatedrather than addingreact-native-gesture-handler+react-native-reanimated.ScrollView's pinch-zoom props are iOS-only, so there was no built-in path, and two native modules for one screen's zoom seemed like the worse trade. The transform geometry lives insrc/photos/photoZoom.tsas pure functions (same split asplaceZoom.ts) with 12 tests; the component only translates touches into it. If the dependency is preferred later, the component is the only thing that changes.Modal, for the reason already documented inSheet.tsx:Modalgets its own window and doesn't reliably draw under Android 15's system bars, so a "full-screen" viewer would stop short of them.photo.regular— the same URL as the thumbnail — so opening it fetches nothing new.Photoalso has afullfield that would look sharper at 3–4×, but wiring it up needs a codegen run against the uncommitted schema plus the Apollo v4 fixups; left for a follow-up.Testing
bunx tsc --noEmit,bun run lint, andbun run testall pass.Not run on a device — no emulator or handset was attached — so the gesture feel (spring stiffness, dismiss threshold, double-tap window) is untested in the hand and may want tuning.