Skip to content

feat(example): convert to Expo app with Expo Router#8

Merged
janicduplessis merged 4 commits intomainfrom
feat/split-example-screens
Mar 16, 2026
Merged

feat(example): convert to Expo app with Expo Router#8
janicduplessis merged 4 commits intomainfrom
feat/split-example-screens

Conversation

@janicduplessis
Copy link
Collaborator

@janicduplessis janicduplessis commented Mar 16, 2026

Summary

Convert the example app from a bare React Native app to a full Expo app using Expo Router with list → detail navigation.

Motivation: The single long scroll list was hard to navigate and slow for UI automation. With Expo Router, each demo is directly accessible by URL slug. Using expo prebuild eliminates manual native dir maintenance and issues like the Hermes V1 symbol mismatch.

Changes

Structure:

  • Remove checked-in android/ and ios/ dirs — now generated via expo prebuild (gitignored)
  • Remove Gemfile — native dirs managed by Expo
  • Add example/app/ directory with file-based Expo Router routes
  • Update CI to use expo prebuild instead of bundle install / pod install

Navigation:

  • Home screen (app/index.tsx) — SectionList of all 19 demos grouped by category:
    • Basic (Button, Fade, Slide, Enter, Exit)
    • Transform (Rotate, Scale, Transform Origin)
    • Timing (Custom Easing, Delay, Combined)
    • Style (Styled Card, Border Radius, Background Color, Style Re-Render)
    • Loop (Pulse, Banner)
    • Advanced (Interrupt, Comparison)
  • Detail screen (app/[demo].tsx) — tap any demo for full-screen view with back button

Demo components:

  • Each demo extracted to its own file in example/src/demos/
  • Registry in example/src/demos/index.ts for dynamic route lookup

Test Plan

CI passes (lint, build-library, build-android, build-ios).
Videos will be added after merge + rebase of the per-property transitions PR.

Validation

iOS — iPhone 17 Pro (iOS 26.2, Debug build via Metro)

pr8-validation-v2.mp4

Android — Android 16 emulator (arm64)

pr8-android.mp4

Web — Chrome, 390px viewport

pr8-web.mp4

- Remove checked-in android/ and ios/ dirs (generated by expo prebuild)
- Add expo-router with file-based routing in example/app/
- Home screen: SectionList grouping all 19 demos (Basic, Transform, Timing, Style, Loop, Advanced)
- Detail screen: dynamic route app/[demo].tsx per demo
- Extract each demo to individual files in example/src/demos/
- Demo registry in example/src/demos/index.ts for easy lookup
- Remove Gemfile (native dirs managed by expo prebuild)
- Update .gitignore to exclude generated android/ and ios/
@janicduplessis janicduplessis force-pushed the feat/split-example-screens branch from be4456a to 076f500 Compare March 16, 2026 03:13
@janicduplessis janicduplessis changed the title feat(example): split demos into tabbed screens feat(example): convert to Expo app with Expo Router Mar 16, 2026
- Add build:android and build:ios scripts that run expo prebuild first
- Remove bundle install / pod install CI step (expo prebuild handles it)
- Update turbo.json inputs for generated native dirs
- Fix Gradle cache key (no longer references checked-in gradle-wrapper)
@janicduplessis janicduplessis merged commit eae4dd6 into main Mar 16, 2026
4 checks passed
@janicduplessis janicduplessis deleted the feat/split-example-screens branch March 16, 2026 20:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant