skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

expo-web-to-native

Migrates web React apps to native iOS and Android apps with Expo.

Updated Mar 27, 2026
Search Tags:#Next.js#migration#React Native#mobile#Expo#iOS Android#web to native
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-web-to-native-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-web-to-native
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-web-to-native
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-web-to-native-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Porting an existing web React app (Next.js, Vite, CRA) to mobile is not a transpilation problem; there is no converter. This Skill provides an ordered, strangler-fig migration playbook: stand up a native Expo shell, run the whole web UI inside DOM components on day one, then nativize screens one by one in priority order while keeping the app shippable throughout. ## Core Features & Use Cases - Six-step migration spine: assess and bucket screens into a durable worklist, scaffold an Expo Router shell, ship a DOM-component shell, strangle screens to native by value, wire data/auth/storage, and ship via EAS. - Web-to-native idiom maps: reference tables translating DOM elements, CSS, React Router, localStorage, cookies, and browser SDKs (Stripe, Maps, OAuth) to their React Native and Expo equivalents, including the gotcha for each. - Native redesign playbook: maps web UX patterns to @expo/ui SwiftUI/Compose components, NativeTabs, sheets, haptics, and motion so screens feel OS-native rather than reskinned. - Run-as-a-loop and verification recipes: a pre-shaped goal objective for unattended iteration, plus a two-agent parity check comparing the running web app (agent-browser) against the native screen (argent). - Use Case: You have a Next.js SaaS dashboard and want it on the App Store. The Skill produces a screen-by-screen worklist, gets the full app running on a phone via DOM components immediately, then guides nativizing the hot screens with real native components. ## Quick Start Use the expo-web-to-native skill to migrate my Next.js React app to a native iOS and Android app with Expo, starting by assessing the repo and writing the migration worklist.

Frequently Asked Questions about expo-web-to-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a React web app to a native mobile app?▼

A web React app cannot be transpiled to native; it migrates screen by screen. Scaffold an Expo shell, run the whole web UI inside DOM components on day one, then nativize screens in priority order using @expo/ui and Expo Router while keeping the app shippable.

How to migrate a Next.js app to React Native with Expo?▼

Mirror the Next.js routes in Expo Router, which maps almost 1:1 (for example [id]/page.tsx becomes [id].tsx). Split async Server Components into a client fetch plus a presentational component, keep server routes and the ORM backend-side, and port screens as DOM components before nativizing.

Does localStorage work in React Native and Expo?▼

React Native has no browser localStorage by default, but expo-sqlite can polyfill it: importing expo-sqlite/localStorage/install provides the global localStorage so existing code works as-is. There is no sessionStorage equivalent because native has no session concept.

Can I use Stripe in an Expo React Native app?▼

It depends on what you sell. Digital goods and subscriptions must use store In-App Purchase via RevenueCat, since Apple and Google require IAP and take roughly 15-30 percent. Physical goods and services can use @stripe/stripe-react-native with PaymentSheet.

Why does my Expo screen build successfully but render blank?▼

A clean expo export only proves a screen bundles, not that it renders. Verify by running both apps and comparing the same route: capture the web original with agent-browser and drive the native simulator with argent, checking content and behavior parity rather than pixels.

When should I use DOM components versus fully native screens?▼

Use DOM components ('use dom') to ship the existing web UI inside native routes on day one and for presentational screens that can stay in a webview. Nativize hot screens that need native feel, gestures, lists, or keyboard handling, since each DOM screen carries a roughly 2 MB web runtime.

Related Skills

Explore More Software Engineering Skills→
jonlucajonluca
3

expo-api-routes

Create and manage API routes for Expo applications hosted on EAS.

Community
Advanced
bmiit145bmiit145

eas-app-stores

Build and submit iOS and Android apps to TestFlight, the App Store, and Google Play with EAS.

Community
Advanced
bmiit145bmiit145

expo-web-to-native

Migrates web React apps to native iOS and Android apps with Expo.

Community
Advanced
aadilmallickaadilmallick

expo-web-to-native

Migrates web React apps to native iOS and Android apps with Expo.

Community
Advanced