
Ask HN: Best way to make a React web into a native mobile app? - soneca
I have a React web app, a fairly simple CRUD on a serverless architecture. The UI in it is not that simple, but it&#x27;s all well componentized and totally mobile first. The web app itself kind of already works like a native app, it doesn&#x27;t even have routes.<p>My question is, what the easiest and&#x2F;or best way to port it to native mobile apps?<p>My options so far seem to be:<p>- Rebuild everything in react-native-web<p>- Start a new React Native project, sharing the most code that I can (state management mostly, not UI)<p>- Port it to Ionic-React<p>- any other?<p>Thanks!
======
davismwfl
I can't believe this is coming out of my mouth/keyboard twice in one week. I
do not advocate it but I will say it mostly works and that is to use Cordova.
We have a react (w/sails) site we packed and shipped using Cordova and while I
dislike it for a variety of reasons it does work. It would be a fast way to
get a mobile app out but not invest the time to rebuild everything. You might
have to tweak a few things but assuming you are using mainstream features
it'll be fine generally.

I'd always suggest building an app either with Flutter or pure Native, but for
quick get it out the door when you have a working site, Cordova will do it.
FWIW, I have never used Ionic, only Cordova, my one concern is Cordova is
already a logistic pain (close to a nightmare) so adding more abstractions on
top of it (Ionic) seems like a bad idea. But again, never used Ionic so can't
really say that my concern is valid there.

~~~
soneca
Thanks! I'll take a look on it. Any resources you could point me about the
packing and tweaks necessary for getting an existent react app into Cordova?

~~~
davismwfl
Honestly the best way is to follow the Cordova setup guide to get started and
then test the app and see if you need to make tweaks. Make sure to test on
physical devices too, not just the emulator. We saw differences in a few cases
which happens even with native dev.

Stuff we noticed in general is that if the site works well on (e.g. is
designed for) mobile devices today it will typically do ok in Cordova, but
sometimes you'll find slight variations during testing so you have to tweak a
specific control or setting. If you have lots of third party plug-ins in your
react code you'll need to be really thorough in testing. I found in some cases
I had to move where .css files were loaded to make sure it worked in Cordova
as it did on desktop (possible a webpack issue too so I can't for sure blame
only Cordova for that). Other thing is make sure you watch your versions
(SDK's, engines, Cordova, node etc), keep everything in line with what it says
it is tested for and it makes life way easier.

~~~
soneca
Thanks a lot, very helpful!

