RepDB Example — React Native (Expo)

A small Expo Router starter that browses 400 fitness exercises from the RepDB free-tier dataset.

Features

• Single-screen list of exercises (FlatList) with thumbnail + tags
• Detail screen with flat start ↔ peak frames that cross-fade (or a single static pose for the ~50 single-frame exercises), instructions, MET, and muscle / equipment icons with localized labels
• Paid-tier preview gallery on the home screen: 5 looping animations (via expo-image) — the exact clips shown on repdb.co, marked "Standard tier preview — evaluation only"
• EN / DE / ES locale switch (translates the exercise data — UI strings are EN)
• Light + dark themes that follow the OS setting
• Builds on iOS, Android, and Web from the same source

Run

npm install
npm run gen-images        # only after syncing the bundle
npm start                 # then press i / a / w for iOS / Android / Web

Or scan the QR code with Expo Go on your phone.

What's vendored where

assets/exercises.json          # the free-tier bundle (400 exercises), imported as a module
assets/images/flat/*.webp      # 745 flat webp (start/peak pairs + single-pose "main")
assets/images/muscles/*.webp   # 27 muscle icons
assets/images/equipment/*.webp # 46 equipment icons
assets/images/samples/*.webp   # 5 paid-tier looping animations (evaluation-only)
lib/images.ts                  # auto-generated require() map (commit it!)
LICENSE-free.md                # RepDB Free Tier License for the bundle data & images
LICENSE                        # MIT for the example code

Why the require() map?

React Native's Metro bundler resolves require() of static assets at build time. Dynamic paths like require('./assets/' + name) won't work. We generate lib/images.ts once with one explicit require() per file (745 flat + samples

• icons), so getImage(slug, variant) returns a usable module ID at runtime.

The paid-tier preview gallery is derived from the animation files in assets/images/samples/ (see SAMPLE_SLUGS in lib/images.ts) — no hardcoded list. Re-run npm run gen-images after syncing the bundle to refresh the map.

Data & license

This demo uses the RepDB free tier: a dated snapshot of 400 exercises with flat-style images, under the RepDB Free Tier License.

Attribution required. Keep a visible link — "Exercise data by RepDB (repdb.co)" — in your app's about/credits screen, README, or footer.

No generative-AI derivation. The images may not be used as input, reference, or conditioning material for generative models (image-to-image, style transfer, fine-tuning, or similar). See term 5 of LICENSE-free.md.

No redistribution as a dataset — in-app use only. The assets/images/samples/ folder is evaluation-only and is not covered by the free-use grant.

For the full, growing dataset with two visual styles, transparent backgrounds, animations, 1024px images, and multilingual data, see https://repdb.co/pricing.

Exercise data & images: RepDB (https://repdb.co)

Sister demos

• exercise-dataset — the raw dataset (JSON + WebP), browsable live viewer
• repdb-example-nextjs
• repdb-example-flutter

License

MIT for the example code (LICENSE). Bundle data & images under the RepDB Free Tier License. PRs welcome — accessibility improvements especially.