Skip to content

feat(journey): enhance Journey with Apple Zoom Transitions and improved milestone cards #408

@BillChirico

Description

@BillChirico

Summary

Enhance the Journey tab with richer milestone/stat cards and Apple Zoom Transitions (iOS 18+) for fluid, interactive navigation between summary views and detailed screens.

Motivation

The Journey tab currently shows stats and milestones but lacks spatial awareness when navigating into detail views. SDK 55 introduced the native Apple Zoom Transition API (Link.AppleZoom / Link.AppleZoomTarget) which creates a smooth zoom animation from a source element to a destination screen — similar to the iOS Photos app.

This is also an opportunity to improve the overall Journey experience with better-designed milestone cards, expanded detail views, and more engaging data presentation.

Scope

Apple Zoom Transitions

  • Wrap milestone cards with Link.AppleZoom so tapping a card zooms into its detail view
  • Add Link.AppleZoomTarget on detail/expanded screens
  • Apply to: milestone cards, sobriety stats, journey timeline entries
  • iOS 18+ only — gracefully falls back to standard push transition on older iOS/Android

Journey Enhancements

  • Redesign milestone cards with richer visuals (progress indicators, icons, animations)
  • Add expanded detail views for milestones showing history, context, and achievements
  • Improve stat cards with better data visualization
  • Consider adding a timeline or calendar view for journey progression
  • Better celebration/achievement moments when milestones are reached

Technical Details

// Source: milestone card on Journey screen
import { Link } from 'expo-router';

<Link href={`/milestone/${id}`} asChild>
  <Link.AppleZoom>
    <Pressable>
      <MilestoneCard milestone={milestone} />
    </Pressable>
  </Link.AppleZoom>
</Link>

// Destination: milestone detail screen
<Link.AppleZoomTarget>
  <MilestoneDetail milestone={milestone} />
</Link.AppleZoomTarget>

References

Tasks

  • Design improved milestone card layout
  • Create milestone detail/expanded view screen
  • Implement Link.AppleZoom on milestone cards
  • Implement Link.AppleZoomTarget on detail screens
  • Improve stat cards with better data viz
  • Add journey timeline/progression view
  • Test zoom transitions on iOS 18+ devices
  • Verify graceful fallback on Android and older iOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew featurefrontendFrontend/UI related changes

    Type

    No type

    Projects

    Status

    Todo

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions