skills.rest
sombek
sombekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-web-to-native

Migrate a web React app to a native iOS/Android app with Expo, screen by screen.

Updated Sep 6, 2026
Search Tags:#migration#next.js#ios#android#react native#expo#web to native
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-web-to-native-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-web-to-native
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/expo-web-to-native
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-web-to-native-sombek

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 native iOS/Android has no transpiler and no safe big-bang rewrite path. This Skill provides an ordered, strangler-fig migration playbook: stand up an Expo shell, run the whole web UI inside DOM components on day one, then nativize screens one at a time while the app stays shippable. ## Core Features & Use Cases - Assessment and worklist: Reads the repo, separates screens from backend routes, and buckets each screen as port-as-is, nativize-now, nativize-later, or hybrid in a durable migration-progress.md file. - Day-one DOM shell: Brings every screen over as an Expo DOM component so the full app runs on a phone before anything is nativized, shippable to TestFlight immediately. - Native redesign guidance: Maps web UX patterns to @expo/ui SwiftUI/Compose components, Expo Router navigation, and mobile interactions, with a false-friends reference translating web idioms (DOM, CSS, localStorage, React Router) to native equivalents. - Run-time verification: Compares the running web original (via agent-browser) against the native screen (via argent on a simulator) for content and behavior parity, including motion recordings. - Use Case: A team with a Next.js SaaS dashboard wants an iOS app. The Skill assesses routes, ships a DOM-component shell in week one, then nativizes the hot screens with @expo/ui while flagging that Stripe digital-goods payments must move to in-app purchase via RevenueCat. ## Quick Start Use the expo-web-to-native skill to assess this web React repo and start migrating it to a native Expo app screen by screen.

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 Next.js app to a native mobile app?▼

There is no transpiler; you migrate incrementally with Expo. Scaffold an Expo Router shell mirroring your routes, run every screen as a DOM component so the app works on day one, then nativize screens one at a time with @expo/ui while the app stays shippable.

How to reuse web React code in React Native?▼

Use Expo DOM components ('use dom') to run existing web UI inside native routes as an interim shell. For permanent native screens, redesign with @expo/ui and RN primitives rather than porting the web layout, since idioms like div, className, and onClick do not carry over.

Can I use Stripe in an Expo app for subscriptions?▼

Not for digital goods: Apple and Google require in-app purchase via store IAP (typically RevenueCat) and take roughly 15-30%, so shipping Stripe for digital subscriptions risks rejection. Stripe's React Native SDK is allowed only for physical goods and services.

Does localStorage work in React Native?▼

Not by default, but expo-sqlite can polyfill it: importing 'expo-sqlite/localStorage/install' provides a global localStorage so existing web code works unchanged. There is no sessionStorage equivalent, and auth tokens should move to expo-secure-store sent as headers.

Why does my Expo screen build but render blank?▼

A clean expo export only proves the screen bundles, not that it renders. Verify by running both apps: capture the web original with agent-browser and drive the native simulator with argent, then compare structure and behavior for the same route.

When should I not use DOM components in Expo?▼

DOM components are an interim shell, not the end state: each carries roughly a 2 MB web runtime and cannot feel native. Layout routes also cannot be DOM components, and hot screens needing gestures, lists, or native feel should be nativized with @expo/ui.

Related Skills

Explore More Software Engineering Skills→
agentic-cookbookagentic-cookbook

port-swiftui-to-appkit

Analyze macOS SwiftUI codebases to plan migration to native AppKit.

Official
Advanced
RitenoobRitenoob

eas-mobile-deployment

Manage EAS builds, submissions, and OTA updates for the RidenDine mobile app.

Community
Advanced
awfixers-stuffawfixers-stuff

clerk-expo-patterns

Implement persistent Clerk authentication in Expo and React Native apps.

Official
Intermediate
openaiopenai
5.3k

building-native-ui

Build native-feeling Expo Router interfaces with navigation, styling, animations, and iOS components.

Official
Advanced