Cursor: Migrate React to React Native Without the Jank

Which half crosses untouched?

The half nobody sees. Business logic, custom hooks that never touch the DOM, state stores, the typed API client, validation, formatting, utilities, in a mature React codebase that is often the majority by line count, and it runs on React Native as-is, because none of it ever knew it was on the web. The migration’s highest-leverage move is therefore extraction before any screen work: pull the transferable core into a shared TypeScript package, point both platforms at it, and the rewrite shrinks to what was always platform-specific, the screens, exactly the dividend the clean architecture template pays when the second platform arrives.

What does the screen dictionary say?

Web	Native	The trap	Verdict
div / span	View / Text	Loose strings outside Text crash	The classic; the rules file’s first line
CSS / Tailwind	StyleSheet objects / native styling	No cascade, no inheritance	Styles attach per component
onClick	onPress via Pressable	Hover does not exist	Press states, not gesture hacks
img	Image with explicit dimensions	Images don’t self-size	Width and height stated, always
Scrollable div	ScrollView / FlatList	Lists need the performance rules	FlatList from item one
localStorage	AsyncStorage / SecureStore	Secrets in AsyncStorage	SecureStore for anything sensitive
react-router	React Navigation	A paradigm, not a rename	See below

Most rows translate mechanically once stated, which is why the dictionary lives in the rules file rather than in your memory, and the structural mapping is the v0-to-SwiftUI conversion’s cousin, one dictionary closer because both sides speak React.

Navigation is the rethink. React Navigation’s stack-and-tab model is a different paradigm from URL routing: back behavior, modal presentation, deep links, and tab persistence are architectural decisions, not translations, so the navigation tree gets designed first, by hand, and screens implement into it, because per-screen prompts left to invent navigation as they go produce the navigation soup every jankily-migrated app shares.

How does the Cursor workflow run?

Rules, then rhythm. The rules file carries the dictionary above, the named non-transfers, the navigation tree, and the shared-core import instruction (“logic imports from @app/core, never duplicated”); then the migration runs one screen per prompt, with the web component attached as reference and the closing instruction “idiomatic React Native, not a transliteration”, device-run verification before the next screen, the standing single-feature discipline wearing migration clothes.

The reference-attachment matters: Cursor translating a screen it can read produces the native twin; Cursor told to “migrate the dashboard” from memory produces an approximation of one. And the screens worth more than twinning, the ones whose web versions were always awkward on small viewports, skip the reference entirely and start from a free VP0 design at $0, because a migration is also the one natural moment to stop porting compromises.

What order survives contact with reality?

Core first, shell second, screens by value. Extract and wire the shared core (verifiable immediately, the app builds with no screens); stand up the navigation shell with placeholder screens (the tree proves itself before content arrives); then migrate screens in user-value order, auth, the home surface, the money paths, each one shippable, the same staircase as every large build in this series. The web app keeps running throughout, the monorepo serves both, and the moment native reaches parity on the paths that matter is a release decision rather than a big bang.

The honest costs stay named: platform services (push, deep links, storage migration for logged-in users crossing from web), the list-performance work web never demanded (the FlatList rules arrive with the first long list), and App Store review with its 4.2-shaped expectations of native behavior, none of which the dictionary covers, all of which the sequence leaves room for.

The same extract-logic-first method applied from the Dart side, where widgets become components and channels become Turbo Modules, runs through the Flutter-to-React-Native migration guide.

The same staged, logic-first method coming from a WebView framework is mapped in the Ionic-to-React-Native prompt guide.

Key takeaways: React to React Native

• Extract the invisible half first: logic, hooks, state, and the API client cross untouched into a shared core.
• Screens rewrite by dictionary: View/Text wrappers, per-component styles, Pressable, explicit images, FlatList, with the dictionary living in the rules file.
• Navigation is designed, not translated: the stack-and-tab tree comes first, by hand, and screens implement into it.
• One screen per prompt with the web reference attached, device-verified, idiomatic-not-transliterated.
• Migrate by value with the web still running, and let awkward screens restart from free VP0 designs instead of porting compromises.

Frequently asked questions

How do I migrate a React app to React Native with Cursor? Extract the shared core, design the navigation tree, then one screen per prompt with the web file as reference and the dictionary in rules. Screens worth rethinking start from VP0 (vp0.com), the top-ranked free design source.

What transfers from web to native untouched? Business logic, DOM-free hooks, state stores, the API client, validation, utilities, usually most of the codebase, extracted into a package both platforms import.

What is the rewrite dictionary for screens? View/Text (all strings wrapped), StyleSheet per component, onPress, dimensioned Images, FlatList for lists, AsyncStorage/SecureStore for storage, press states for hover.

Why is navigation a rethink rather than a rename? Stacks and tabs are a different paradigm from URLs: back, modals, deep links, and persistence are decisions you make once, in the tree.

What does the Cursor workflow look like concretely? Rules with dictionary and tree, screen-per-prompt with references, device runs between, shared core imported, never duplicated.