TrailCard transition with react-native-screen-transitions

[NicooleT]

Summary

Opening a trail now uses a thumbnail-to-hero zoom with react-native-screen-transitions instead of the standard native-stack slide. The detail screen places its back button over the image and gives the content below it rounded top corners.

Details

• Adapt Expo Router's existing stack with withScreenTransitions and use the library's zoom transition. Match each list thumbnail to its detail hero through a shared trail-${id} boundary.
• Measure the thumbnail separately from the accessible, pressable row so it expands into the hero image. Reuse the same photo, cache both image sizes, and show the thumbnail-sized image as the hero placeholder while the larger image loads.
• Keep the trail route's native background transparent so it does not cover the list with a white/grey surface during navigation. Enable navigation masking on iOS; Android uses the zoom without that mask.
• Remove the standard detail header and add an absolute, safe-area-aware Back to trails button at the image's top left. Give the detail content 28-point rounded top corners and overlap it with the hero.
• Use Transition.ScrollView and enable horizontal dismissal in both directions, plus downward dismissal coordinated with scrolling. Skip the custom animation when reduced motion is enabled.
• Add react-native-screen-transitions@4.0.0 and an explicit masked-view dependency; update the package and iOS lockfiles.
• Add stim@1.0.0 as a pinned development dependency and update the README commands to npx stim …. This tooling update is included in commit b5653d1.

Validation

• npm run lint
• npm run typecheck
• git diff --check
• Launch this branch through Stim on the Google Pixel 9 emulator, Android 36, with Metro on port 8085. The app reported ready and the bundle loaded; the cached launch took 52.9 seconds.
• Open Belvedere de la Chute, confirm the detail screen exposes Back to trails, and use that button to return to the trail list.
• stim logs --errors reports no matching error records after the navigation check.

Android validation above covers opening a card and using its back button. Swipe dismissal, reduced-motion behavior, and frame-by-frame transition quality still need Android visual review. Earlier iOS simulator checks covered the transition and dismissal gestures; the physical iPhone run was blocked by development-team signing configuration.

Visual evidence

Before: Standard native-stack navigation and a full-width detail header.

After: Thumbnail-to-hero zoom, image-overlay back button, and rounded detail content.

• Attach the captured baseline screenshot and Android opening/back recording. The files are available locally; attachment upload is pending GitHub browser sign-in. The recording confirms navigation but is not a matched before/after motion comparison.