---
title: Native
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/native/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/native/
last_updated: 2026-06-20
---

# Native

> Cross-platform mobile development patterns with Expo, React Native, iOS, and Android

Cross-platform mobile development patterns for Expo and React Native that get you to a real, shippable app instead of a demo. It bakes in Expo Router navigation, NativeWind styling, secure token storage, offline-first data sync, and the mandatory four-state rendering: loading, error, empty, success, so every screen handles reality, not just the happy path.

## Use cases
- Scaffolding a new Expo app with file-based routing
- Wiring Supabase auth with secure session persistence
- Building list screens with pull-to-refresh and all four states
- Storing tokens safely in the device keychain, not plain storage
- Shipping hotfixes over the air without a full app-store review
- Styling components with NativeWind instead of inline styles

## Benefits
- Ship screens that never show a blank page on error or empty data
- Keep auth tokens in encrypted native storage by default
- Deliver platform-native feel on both iOS and Android
- Push fixes instantly via over-the-air updates

## What’s included
- Expo Router file structure with tab and auth groups
- TanStack Query data-fetching hooks with cache invalidation
- Secure-store Supabase auth adapter and auth provider
- Four-state screen pattern with skeleton, error retry, and empty states
- NativeWind setup and reusable styled component examples
- Completion checklist and red-flag table for native pitfalls

## Who it’s for
For developers building production React Native apps with Expo who want secure storage, offline-aware data, and complete state handling from day one.

## How it runs
Tokens live in the Keychain, never AsyncStorage, and every data screen ships all four states. Those are the non-negotiables this cross-platform build enforces from scaffold to handoff.
1. Scaffolds with create-expo-app and installs every native package via npx expo install, never npm install, because version mismatches against the Expo SDK surface as runtime crashes. expo-doctor verifies compatibility.
2. Lays the navigation tree with Expo Router file conventions: a root layout wiring QueryClient and AuthProvider, (tabs) and (auth) groups, dynamic [id] routes and a +not-found screen.
3. Wires auth by the secure storage hierarchy: the Supabase client persists sessions through an expo-secure-store adapter (native Keychain/Keystore), never AsyncStorage for tokens, with an AuthProvider listening to onAuthStateChange.
4. Builds data access as TanStack Query hooks over Supabase: useQuery for lists, useMutation with invalidateQueries on success, cached data shown first while a background refetch runs.
5. Renders every data screen in all four states as a hard checklist: loading skeleton (not a spinner), error state with a retry button, empty state with a suggested action, and a virtualized FlatList with RefreshControl for success.
6. Closes on the completion checklist before any handoff: real API integration, secure token storage, zero TypeScript errors, NativeWind instead of inline styles, and the app exercised on both iOS and Android.

## FAQ
### I run a bare React Native app without Expo. How much of this applies?
The architectural patterns travel: four-state screens, TanStack Query hooks, and the layered auth thinking are toolchain-neutral. But the file-based routing, secure-store adapter, and over-the-air update flow are Expo-specific, so a bare workflow keeps the concepts and swaps the implementations.

### What does the mandatory four-state pattern actually change in my screens?
Every screen explicitly renders loading, error, empty, and success: a skeleton while fetching, a retry path on failure, and a designed empty state instead of a blank list. It removes the class of bugs where a screen silently shows nothing because only the happy path was built.

### Do over-the-air updates mean I never face app store review again?
No. OTA covers the JavaScript layer, so logic and UI hotfixes ship instantly, but anything touching native modules, permissions, or the binary still requires a store build and review. It shrinks how often you queue for review, it doesn't abolish the queue.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [AI code review and developer workflow](https://forgehouse.ai/guides/ai-code-review/)