feat(mobile): migrate Result, Herd, Analytics and Scan to iOS HIG ios tokens#34
Merged
Merged
Conversation
Continues the Liquid Health migration started in #22 and #25. - Inline navigation bar (back chevron, animal id as title, share trailing) replacing the custom header. Push view convention, not a large title. - Demo banner restyled as an iOS info strip (amber paper, single line, cloud-offline glyph) instead of the previous bordered warning bar. - Image preview inset 16pt with 18pt corner radius, overlay toggle rendered as a translucent black pill. - Hero card insetGrouped with eyebrow + System rounded 56pt weight value, kg unit, confidence bar in sage, accuracy note as footer caption. - Detection and Measurements sections rendered as native iOS rows with hairline separators, replacing the MetricCard grid for visual consistency with Settings and Home. - Captured-at timestamp moved to the section footer of Measurements. - Primary action New scan in label-black, secondary View herd inline in sage, replacing the side by side button row. - Copy translated to English for codebase consistency. No changes to navigation, storage, or scan data shape.
Continues the Liquid Health migration. - Large title Herd with a dynamic subtitle showing record count or filter ratio (5 of 23 when searching) - Trailing plus button in sage accent navigating to Scan, matching Apple Notes / Reminders / Mail convention - iOS native search field (light grey rounded inset, clear button while editing, returnKeyType search) replacing the bordered custom input - Records grouped into three temporal sections (Today / This week / Earlier) using a startOfDay bucket - Rows in insetGrouped cards with paw icon (real) or cube outline (demo) tile, animal id, breed and timestamp meta in iOS style, weight in System rounded, chevron - Long-press on a row opens a destructive Alert sheet to remove the scan, matching native iOS list pattern; trash icon dropped - Empty state distinguishes No matches (with active filter) from No scans yet (cold start) with copy guidance - Footer hint Long-press a row to remove it. teaches the gesture - Copy in English for codebase consistency No changes to navigation, storage shape, or scan data flow.
Continues the Liquid Health migration with a chart-aware redesign. - Large title Analytics with a dynamic subtitle showing total scans or No data yet on cold start - Hero card insetGrouped with mean live weight in System rounded 56pt, range and average confidence as meta caption, and three inline tiles (scans, real animals, breeds) sharing the same card - Activity section renders Last 7 days as an SVG bar chart in sage with rounded bars, count labels above non-zero bars, day letters as the x-axis ticks, and a hairline baseline. Chart width is recomputed via onLayout so it scales to any viewport. - Mean weight by breed section uses iOS-style horizontal progress bars (track + sage fill) with breed label, sample count in tertiary, and mean weight in System rounded - Summary section as native iOS rows (max, min, mean confidence, real animals ratio) with hairline separators and a footer caption explaining the local-data scope - Empty state redesigned with copy that points the user toward the scan flow - Copy in English for codebase consistency Uses the existing react-native-svg dependency for charts, no new libraries added.
Completes the Liquid Health migration. Camera capture flow, haptics, image picker, storage and navigation are untouched. Only the chrome is redesigned around ios tokens. - Permission gate uses a sage iconography card, label black primary Allow camera access, sage secondary Back, instead of the previous bare warning layout - Top bar over the camera: black translucent close pill, animal id and breed label centered, flip camera trailing - Viewfinder corners switched from tailwind emerald to sage and bumped slightly for thumb visibility. Frame the animal from the side hint moved into a black translucent pill below the frame - Bottom controls evenly spaced as Library, 76pt capture button (white ring + white inner), Edit ID. Spinner during processing uses sage - Pre-scan modal redesigned as an iOS bottom sheet: drag handle, New scan title with subtle subtitle, Animal section with row ID input, Breed section with horizontal sage chips for seven Portuguese breeds (Unspecified, Minhota, Alentejana, Barrosa, Maronesa, Cachena, Mirandesa). Open camera primary in label black, Cancel inline in sage - Processing overlay card uses iOS HIG card pattern with Processing header and four pipeline rows (Detecting animal, Segmenting contour, Extracting measurements, Estimating weight) in English - All user-facing copy in English for codebase consistency Camera logic and dependencies are unchanged: expo-camera, expo-image-picker, expo-haptics. No new dependencies.
nicole-gomes
approved these changes
Jun 1, 2026
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
2 participants
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
Completes the Liquid Health migration. Settings landed in #25; this PR finishes the remaining four screens: Result, Herd, Analytics, Scan. Marked ready for review — all four commits are in.
Strictly additive theme changes from PR #22 (the
ios.*namespace). Zero behavioural changes to scan data, storage, navigation, or camera logic.Progress
abb7ef83acfb30d87cd86fe98b99What changed per screen
Result (
abb7ef8)Herd (
3acfb30)5 of 23when searching)startOfDaybucketNo matches(filtered) fromNo scans yetAnalytics (
d87cd86)23 scans · all timeorNo data yet)onLayoutfor responsive scalingreact-native-svg(already a project dependency — no new libs)Scan (
fe98b99)Allow camera access+ sage secondaryBackFrame the animal from the side, fully visiblebelow the frameNew scan+ subtle subtitle, Animal section (row ID input), Breed section (horizontal sage chips for 7 Portuguese breeds), Open camera primary in label-black, Cancel inline sageProcessingheader and 4 pipeline rows in EnglishOut of scope (separate follow-ups)
expo-symbols@expo/vector-iconsto the SDK 54-compatible version (or migrate toexpo-symbols)expo-fontMetricCardshared component (no longer used by Result after this PR)Test plan
All four screens already tested end-to-end on iPhone via Expo Go during development per the test-before-commit convention:
npx expo start --clearproduces a working bundleReady for review.