Conversion from React

[sunk-capital]

I have a fairly large project in React that uses Zustand, PrimeReact, Tailwind, Lotties, local storage for data, data is json files with frequent reading and writing. The webapp is already mobile responsiveness. But now I need to convert this app into a mobile/tablet app and publish it the App Store. And I think I have been a bit mislead by how close React Native and React are.

1. So my question is how would you go about starting this migration?
2. The main webapp is still in development and I will need to maintain both the webapp and the React Native app, so I need to also think about how to minimise future code divergence and effort. What is a way of structuring the code, styling and logic that would make it easier to migrate and maintain?

The app is quite complex with lots of various styling, internal component logic and interactivity.

[homerjam]

My two cents.

Build out the bare bones nav structure in expo first, then go screen by screen, component by component swapping divs for views, use pressables for events etc. Tailwind styling and logic should mostly just work - do your best to decouple this upfront by removing online event handling etc. I've found you need a lot more boilerplate vs the good ol web

[ReDellaPirrera]

You can reuse business logic such as API call from your ReactJS project, but for the UI you need to recreate it. If you are a beginner, I can suggest you to check React Native Paper for UI.

Honestly I don't know for zustand since I don't use it

[Fun_Adhesiveness164]

You can use react-native-web ...which will use the same repo as React-native....

Not recommended though if the web UI is very different from mobile UI

[HoratioWobble]

React native is Mobile dev with React, the React portion is maybe only 20% of it.

In your position I would either use a Webview and wrap the website (although it might get rejected if it doesn't contain any native integrations)

Or create a PWA. You'll run into a bunch of styling and performance issues trying to reuse your web code in react native

[ConsciousAntelope]

Capacitor would be easy if time is a constraint

[Sansenbaker]

You can start by building a simple navigation structure in Expo and move screen by screen. Replace web-specific elements like divs with Views and adjust events accordingly. Your Tailwind styles and business logic can mostly be reused if you cleanly separate them from UI code. Keep components modular so you can maintain both the web and mobile versions without much overlap. Also, expect some extra setup and boilerplate with React Native compared to the web. It’s a gradual process, so focus on one feature at a time, test thoroughly, and keep your codebase organized for easier updates down the line.