Fitness App v1.0.0

June 2026

Meet Stride, the second template in the HeroUI Native Pro library. Unlike a generic dashboard shell, Stride is a complete workout flow — from "what should I do today?" on the home screen all the way through logging individual sets and seeing a summary screen when you re-rack. Seven screens, real navigation, real state, and a heroui-native-pro component on practically every surface.

App Map

Three tabs and three pushed screens, wired with Expo Router:

Today ((tabs)/(home)/index) — activity rings hero, featured workout card, daily stats grid
Activity drill-down ((tabs)/(home)/activity) — pushed from the Steps tile with a step ProgressCircle, animated NumberFlow count, hourly bar chart, and supplementary stat tiles
Train ((tabs)/(train)/index) — featured program, category filter, and a program list
Profile ((tabs)/(profile)/index) — avatar with Pro badge, lifetime stats, achievements row, a gradient membership card, and a real settings list
Program detail (program/[id]) — parallax hero image, ratings, stat surfaces, and an accordion of exercises
Session (session) — the active-workout screen with a live timer, header progress bar, set rows, and a bottom-sheet logger
Summary (summary) — a modal screen rewarding the user with effort ring, splits, rating, and a "hold to share" action

Tabs use the platform-correct shell: expo-router's NativeTabs on iOS, a custom FloatingTabBar (rounded Surface pill, haptic taps, ScreenFade gradient underneath) on Android.

Today, At a Glance

The home tab opens with RadialChart-powered activity rings: Move (kcal), Steps, and Active (minutes), each color-tied to a semantic metric token. An animated NumberFlow shows today's step count inside the rings; the legend mirrors the rings as small color dots with value / goal unit lines.

Below the rings, a Card showcases the featured program — image, metadata (45 min · 420 kcal · Intermediate), and a primary Button with a play icon — which navigates to the program detail screen. Underneath, a 2×2 grid of StatTiles surfaces Steps, Calories, Active minutes, and Floors; tapping Steps pushes into the activity detail screen.

Activity Detail (Apple Health-style)

A focused drill-down screen with:

A ProgressCircle centered on the step goal
A large animated NumberFlow step count with timeline labels (12am → 6am → 12pm → 6pm → 12am)
A 24-bar hourly distribution chart driven by a custom BarsChart over mocked hourly steps
Three editorial stat cards (Distance, Calories, Climbed) rendered with NumberValue for locale-aware formatting

Train Tab

Built around content discovery:

A full-bleed FeaturedProgram card with a gradient overlay and metadata chips
A horizontally-scrolling CategoryFilter using ToggleButtonGroup / ToggleButton (All · Strength · Cardio · HIIT · Yoga · Mobility) with single-select, disallow-empty selection
A ProgramCard list with thumbnail, category eyebrow, New / Pro chips, metadata line, and either a ProgressBar (if you've started it) or a read-only Rating (if you haven't)

The list filters reactively from the selected category, with five seeded programs spanning every category.

Program Detail

Tapping a card pushes a detail screen built for sell-through:

A parallax hero image that stretches and scales on overscroll using Reanimated useScrollOffset + interpolate
Category / level / Pro Chips and a Rating with (ratingCount)
A three-stat Surface row: minutes · kcal · moves
An optional resumption ProgressBar when program.progress > 0
An Accordion of exercises showing sets × reps (or sets × duration for hold-based moves) with expandable instructions
A pinned-to-bottom SlideButton ("Slide to start") with an accent overlay state, sitting on top of a background-to-transparent LinearGradient fade

Live Session Screen

The most interactive screen in the template, and the showcase for several Pro components at once:

A live elapsed timer in the header via DurationFlow (animated digit transitions)
A ProgressBar in the header tracking completed sets across the entire session
A Chip showing "current / total" exercise position
One set row per planned set; tapping a row opens a BottomSheet log sheet
Inside the sheet, two side-by-side **NumberStepper**s for weight (kg) and reps with step={2.5} / step={1}, or a centered duration display for hold-based moves
A primary Log set / Save set / Mark as not done action set
A Next exercise button between exercises, swapped for a SlideButton ("Slide to finish") on the final one
Haptic feedback on every meaningful interaction via fireHaptic

Presented as a modal route on completion:

An "Effort" ActivityRingStack (single RadialChart ring) with a large animated kcal NumberFlow in the center
A row of three stat tiles: minutes, duration (mm:ss), and moves
A "How did it feel?" 5-star Rating
A ProgressButton with holdDuration={1100} for a "Hold to share" celebratory action
A tertiary Done button that pops back to the tabs and fires a notification haptic

Profile

Personal-account UI patterns you'll lift into your own app:

Avatar with Avatar.Image + fallback initials, anchored with a Badge for Pro status
A stats row in a Surface showing total workouts, day streak, and weekly goal
A horizontally-scrolling achievements row of locked / unlocked badges (icon + title)
A gradient Membership card ("Stride Pro") with a hand-drawn SVG dot pattern, perks list, and "Manage plan" CTA — scoped to light theme via ScopedTheme so the artwork stays consistent in dark mode
A real ListGroup settings block: notifications Switch, goals link with chevron, and a ThemeSelect for Light / Dark / System

Stack Highlights

Expo Router with grouped route segments per tab ((home), (train), (profile)) so each tab nests its own Stack and header
Reanimated 4 for parallax, ring animations, and number transitions
Uniwind (Tailwind for React Native) with accent-*, surface, foreground, muted semantic tokens — re-skin the whole app by editing tokens
Bricolage Grotesque display font + Plus Jakarta Sans body font, both loaded via expo-font with a splash hold
Haptic feedback on every navigation and write action
All Pro components that ship in 1.0.0-beta.5 are used somewhere — RadialChart, ProgressCircle, ProgressBar, SlideButton, ProgressButton, NumberStepper, NumberValue, Rating, Badge, ToggleButton(Group) — making this template double as a worked example for each one

Heads-up

Stride uses native modules that aren't included in Expo Go (expo-router/unstable-native-tabs on iOS, plus Reanimated worklets and react-native-svg). You'll need an Expo development build — npm run ios or npm run android after the install — rather than scanning a QR with Expo Go.

Get the Template

Open the Templates page, find the Fitness App card, and hit Download to grab the Expo source. A HeroUI Native Pro license is required.