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

SurfaceRouteLabelPurpose
Homeapp/(tabs)/index.tsxIntegratedProduct pitch, stack badges, license card, category launchers, and demo cards
Side drawerapp/(tabs)/_layout.tsxIntegratedQuick links to Component, Showcase, Todos, Upload, Refer, and account routes
Todosapp/todos.tsxExampleReference Supabase CRUD feature
Upload sampleapp/upload-sample.tsxExampleReference Supabase Storage upload flow
Referapp/refer.tsxExampleShare a deep link and record a rating trigger
Permissionsapp/permissions.tsxIntegratedPrime native permissions before the system dialogs
Profileapp/profile.tsxIntegratedEditable account profile, avatar upload, language, and theme
Account & Securityapp/account-security.tsxIntegratedEmail, password, biometric lock, sessions, and account deletion
Me tabapp/(tabs)/me.tsxIntegratedSigned-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-paywall when the user is free and /manage-subscription when useEntitlement().isEntitled is 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:types

Move 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, and location.
  • Language picker backed by I18nProvider.
  • Theme picker backed by ThemePreferenceProvider.
  • Photo-library permission handoff to /permissions before avatar selection.

Account & Security is the example for sensitive account flows:

  • Change email with OTP verification.
  • Change password with react-hook-form and zod validation.
  • Enable biometric app lock when device hardware and enrollment are available.
  • Sign out other sessions.
  • Delete account through the delete-account Supabase 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:

PermissionModulePlatform notes
Notificationslib/notifications.tsxDevice-only for real Expo push tokens
Photosexpo-image-picker media library permissionUsed before avatar selection
Cameraexpo-image-picker camera permissionReady for camera capture features
Trackinglib/tracking-permissionsiOS 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.

On this page