Example Features
Learn from the Todos, upload sample, refer, permissions, and account examples.
The app includes several replace-me surfaces that are meant to teach patterns, not define your product. Keep them while you are learning the template, then replace the screens, keep the service modules, or delete the demos once your own feature set is ready.
Where users find them
| Surface | Route | Label | Purpose |
|---|---|---|---|
| Home | app/(tabs)/index.tsx | Integrated | Product pitch, stack badges, license card, category launchers, and demo cards |
| Side drawer | app/(tabs)/_layout.tsx | Integrated | Quick links to Component, Showcase, Todos, Upload, Refer, and account routes |
| Todos | app/todos.tsx | Example | Reference Supabase CRUD feature |
| Upload sample | app/upload-sample.tsx | Example | Reference Supabase Storage upload flow |
| Refer | app/refer.tsx | Example | Share a deep link and record a rating trigger |
| Permissions | app/permissions.tsx | Integrated | Prime native permissions before the system dialogs |
| Profile | app/profile.tsx | Integrated | Editable account profile, avatar upload, language, and theme |
| Account & Security | app/account-security.tsx | Integrated | Email, password, biometric lock, sessions, and account deletion |
| Me tab | app/(tabs)/me.tsx | Integrated | Signed-in settings hub |
Home tab
Home is the starter's first product surface. It renders stack badges for React Native, Expo, Supabase, RevenueCat, PostHog, Sentry, NativeWind, TypeScript, i18n, and theming, then shows three launcher areas:
- License card: opens
/home-paywallwhen the user is free and/manage-subscriptionwhenuseEntitlement().isEntitledis true. - What's inside: six category tiles that all route to the Showcase tab.
- Demos: cards for Components, Todos, and Upload sample.
The category list is intentionally copied into Home instead of imported from
lib/showcase. That keeps the core Home tab usable even if you remove the
Showcase demo catalog later.
Todos
app/todos.tsx is the reference data feature. It demonstrates:
- Supabase row ownership through the signed-in user ID.
- TanStack Query infinite pagination with a page size of 20.
- Filters for all, active, and completed todos.
- Add, toggle, inline edit, delete, clear completed, and reorder actions.
- Query-cache updates after mutations, plus rollback for failed reorders.
- Pull-to-refresh, load-more pagination, friendly network errors, and toast feedback.
Use it as the model for your first real feature:
Create the table
Add a Supabase migration with RLS policies scoped to auth.uid().
Regenerate types
Run the type generator from the template root after the schema changes:
pnpm gen:typesMove data access into lib/
Todos keeps its query functions in the screen because it is a compact example.
For a product feature, prefer a dedicated module such as lib/projects.ts.
Render from Query state
Use queryKeys, useQuery or useInfiniteQuery, optimistic cache updates,
and toNetworkFriendlyMessage() for user-facing failures.
Upload sample
app/upload-sample.tsx is a signed-in Storage example. It uses
expo-document-picker to pick multiple files, reads bytes through
expo-file-system, uploads directly to the sample-uploads bucket with XHR
progress, and inserts a sample_uploads metadata row.
The path format is:
sample-uploads/<user-id>/<timestamp>-<random>-<safe-file-name>The step7_examples migration creates the bucket, the sample_uploads table,
and the folder-scoped storage policies. No manual bucket setup is required.
Profile and account
Profile is the example for account-owned settings:
- Avatar upload through
useProfile().uploadAvatar. - Editable
full_name,bio,phone, andlocation. - Language picker backed by
I18nProvider. - Theme picker backed by
ThemePreferenceProvider. - Photo-library permission handoff to
/permissionsbefore avatar selection.
Account & Security is the example for sensitive account flows:
- Change email with OTP verification.
- Change password with
react-hook-formand zod validation. - Enable biometric app lock when device hardware and enrollment are available.
- Sign out other sessions.
- Delete account through the
delete-accountSupabase Edge Function.
Apple review expects account deletion to be available in-app, so keep that path or replace it with an equivalent flow before release.
Refer and rating
app/refer.tsx builds an invite URL with createAppLink("/"), opens the
native share sheet, and records the referral_shared rating trigger. The app
does not ship a referral backend. Treat this as a compact growth example:
replace lib/referrals.ts with your own invite codes, attribution tracking, or
reward logic.
Permissions primer
app/permissions.tsx enumerates four permission cards:
| Permission | Module | Platform notes |
|---|---|---|
| Notifications | lib/notifications.tsx | Device-only for real Expo push tokens |
| Photos | expo-image-picker media library permission | Used before avatar selection |
| Camera | expo-image-picker camera permission | Ready for camera capture features |
| Tracking | lib/tracking-permissions | iOS ATT prompt; web fallback no-ops |
Each card shows the current status, explains the benefit, and only then opens the native request. That pattern is better for review and conversion than requesting all permissions at cold launch.
Replace or remove demos
- Replace Todos when you add your product's main data model.
- Remove Upload sample if your app does not need arbitrary files.
- Keep Permissions if you use notifications, photos, camera, or ATT.
- Keep Profile, Account & Security, and Me unless you are replacing the auth model.
- Use Showcase's removal recipe if you want to remove the demo catalog without removing the underlying real features.
