React Native fitness app template for ExpoHow to build a fitness app in React Native
Fitness and health trackers are charts first: rings that close, streak calendars, goal bars and gauges, plus pickers for times and amounts and a profile with settings.
Screens
- DashboardProA finance / analytics home screen: a collapsing “Overview” large title with bell and avatar, time-of-day greeting, Day / Week / Month switcher, a revenue area chart that rises in on every period change and scrubs under your finger while the headline number rolls, KPI tiles with sparklines, springy quick actions and recent transactions — plus skeleton loading and pull-to-refresh.
- ProfileProAccount profile for any app: a centred header (avatar, name, badge, email · phone, Edit profile), a highlights strip, then iOS-style grouped rows for personal details, account, preferences and support, and a sign-out button. Monochrome by default; sections rise in smoothly and respect Reduce Motion.
- SettingsProAn iOS-style grouped settings screen: profile header with a Pro badge, System / Light / Dark picker, animated switches, chevron rows with details and a destructive sign-out row.
Components
- Ruler Time PickerProDrag a tick ruler and the big time or date rolls piece by piece with a motion blur.
- SliderA native-driver slider with a swelling thumb, tap-to-seek and a two-thumb range mode.
- ProgressA bar, ring or segments with a glowing head; finishing flashes and draws a check.
- CalendarA month calendar where months slide in from the side you travel and ranges draw one band.
- Segmented ControlA liquid indicator that stretches as it slides; drag it to scrub.
- Number TickerProEach digit rolls like an odometer, flashing green or red as it changes.
Charts
Activity Rings, Progress Rings, Calendar Heatmap, Goal Bars, Gauge, Bar Chart — animated, touchable and in Expo Go, from the MIT expo-charts package.
Get started
Set up the shared theme once, then add the free pieces in one go:
Items marked Pro install the same way after ExpoKit Pro and npx @expokit/cli@latest login.
FAQ
- What's the fastest way to build a fitness app in React Native?
- Add ready-made screens from ExpoKit — Dashboard, Profile and Settings — to an Expo Router app with one CLI command each. The ExpoKit CLI copies each one's TypeScript source into your project, so you own and edit the code. It runs on iOS, Android and web.
- Does this fitness app UI work in Expo Go?
- Yes. Every screen and component on this page runs in Expo Go on iOS and Android, no development build needed.
- Is it free?
- Dashboard, Profile, Settings, Ruler Time Picker and Number Ticker are part of ExpoKit Pro (one payment, unlimited projects). The other 10 items here are free and MIT-licensed.
- Which charts work for a fitness app?
- Activity Rings, Progress Rings, Calendar Heatmap, Goal Bars, Gauge and Bar Chart, from expo-charts. They're animated and touchable, draw with react-native-svg and run in Expo Go.
- What does it install?
- The CLI adds the shared ExpoKit theme once and these packages where the items need them: expo-audio, expo-file-system, expo-haptics, react-native-svg.