A HeroUI Native Pro template — Stride, a workout & activity app with activity rings, a program library, full in-session logging, and a celebratory summary screen.
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.
Three tabs and three pushed screens, wired with Expo Router:
(tabs)/(home)/index) — activity rings hero, featured workout card, daily stats grid(tabs)/(home)/activity) — pushed from the Steps tile with a step ProgressCircle, animated NumberFlow count, hourly bar chart, and supplementary stat tiles(tabs)/(train)/index) — featured program, category filter, and a program list(tabs)/(profile)/index) — avatar with Pro badge, lifetime stats, achievements row, a gradient membership card, and a real settings listprogram/[id]) — parallax hero image, ratings, stat surfaces, and an accordion of exercisessession) — the active-workout screen with a live timer, header progress bar, set rows, and a bottom-sheet loggersummary) — a modal screen rewarding the user with effort ring, splits, rating, and a "hold to share" actionTabs use the platform-correct shell: expo-router's NativeTabs on iOS, a custom FloatingTabBar (rounded Surface pill, haptic taps, ScreenFade gradient underneath) on Android.
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.
A focused drill-down screen with:
ProgressCircle centered on the step goalNumberFlow step count with timeline labels (12am → 6am → 12pm → 6pm → 12am)BarsChart over mocked hourly stepsNumberValue for locale-aware formattingBuilt around content discovery:
FeaturedProgram card with a gradient overlay and metadata chipsCategoryFilter using ToggleButtonGroup / ToggleButton (All · Strength · Cardio · HIIT · Yoga · Mobility) with single-select, disallow-empty selectionProgramCard 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.
Tapping a card pushes a detail screen built for sell-through:
useScrollOffset + interpolateChips and a Rating with (ratingCount)Surface row: minutes · kcal · movesProgressBar when program.progress > 0Accordion of exercises showing sets × reps (or sets × duration for hold-based moves) with expandable instructionsSlideButton ("Slide to start") with an accent overlay state, sitting on top of a background-to-transparent LinearGradient fadeThe most interactive screen in the template, and the showcase for several Pro components at once:
DurationFlow (animated digit transitions)ProgressBar in the header tracking completed sets across the entire sessionChip showing "current / total" exercise positionBottomSheet log sheetNumberStepper**s for weight (kg) and reps with step={2.5} / step={1}, or a centered duration display for hold-based movesSlideButton ("Slide to finish") on the final onefireHapticPresented as a modal route on completion:
ActivityRingStack (single RadialChart ring) with a large animated kcal NumberFlow in the centermm:ss), and movesRatingProgressButton with holdDuration={1100} for a "Hold to share" celebratory actiontertiary Done button that pops back to the tabs and fires a notification hapticPersonal-account UI patterns you'll lift into your own app:
Avatar with Avatar.Image + fallback initials, anchored with a Badge for Pro statusSurface showing total workouts, day streak, and weekly goalScopedTheme so the artwork stays consistent in dark modeListGroup settings block: notifications Switch, goals link with chevron, and a ThemeSelect for Light / Dark / System(home), (train), (profile)) so each tab nests its own Stack and headeraccent-*, surface, foreground, muted semantic tokens — re-skin the whole app by editing tokensexpo-font with a splash hold1.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 oneStride 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.
Open the Templates page, find the Fitness App card, and hit Download to grab the Expo source. A HeroUI Native Pro license is required.
1.0.0-beta.6
Adds FAB, FlipCard, and Timeline — a floating action button that expands into portal-rendered actions, a spring-driven 3D flip card, and a composable vertical event chronology.
Style Guides Native
Design themes in the Pro Style Guides, preview them live on iOS and Android, and scan a QR code to open your theme in the HeroUI Native app.