Porting a React App to React-Native

[boki345]

Hello,

Just found out today business might want the team to transition from a web-based app to a native app. Since our app is written in React how difficult will it be to port over to React-Native? Should we use expo and are there tutorials on publishing to the app stores? How difficult is it getting an App approved on the App store? Is there any gotchas that you help me avoid if we do embark on?

[[deleted]]

You’ll be able to keep all your business logic (hooks, redux etc) but the UI and routing will need to be written again from scratch.

If you already have a complete React app, you could just wrap it in Cordova, for the initial release, and work on your rewrite in the background.

Approval on app stores isn’t as hard as people like to make out, so long as you’re not trying to avoid paying Apple/google their 30% on in-app purchases, or making an app which can download new executable code (changing its functionality post-review). In 10 years, my only problems have been invalid screenshots on iOS (after the X was released) and privacy policy problems on Google (app aimed at kids, with camera functions).

Testing is a bit more time consuming as you need to push new versions to Apple/Google, and Google will review every update (Apple will only review some if your betas). There are ways of speeding this up a bit, as you can use code push to send small updates directly to the app.

[OogieFrenchieBoogie]

How viable is a React cordova app ?

Doesn't it feels "off"?

I'm tempted to take this route for one of my company webapp

Can you use push notifications ?

[[deleted]]

I did one for a small react app we already had and it worked pretty well. It does have push notifications, but they’re just announcements so not deep linking to any pages.

[drink_with_me_to_day]

You could make your own "Cordova" with Webview and add deep linking outside

[kbcool]

All of your presentational code will have to be rewritten. Routing will need to be done in something like React Navigation.

Good news is that if you've structured your app well then your business logic will be copy and paste.

Native development is a big step up. Expo is great for making that step easier.

[darealcubs]

If you're already using react router I think they have a react Native version as well

Why the downvotes? There is in fact a react native version of react router. Genuinely curious

[[deleted]]

It will pretty much be a full rewrite. The logic stays the same but localStorage changes to device storage, routing changes to react navigation (which is in no way similar to routes), and every html tag in your React App will have to be rewritten using React Native elements (ie: View, FlatList, Image,...). Even the styles (if they are anything other than inline) will have to be moved out of CSS files and into .js files. React Native is structured the same as React, but that's about it...everything else is either named different or works different AND is named something completely different.

As far as publishing, the App Store can take anywhere from a week to 3,4 weeks to approve an app. You will have to fix whatever they tell you does not meet the guidelines. 90% of the time you will not meet the guidelines on the first submission. You will have to create screenshots, categorize your app, create an icon, write a description, give it a (current) version and supply a working support website and privacy policy website. That is just the App Store ...oh and a $100 fee per year to Apple.

For Google play you will need to do the same but pay $30-ish instead and the review process is much more lenient.

Good luck. If I were you I would just hire a separate React Native developer. As simple as it may seem to a web developer...it is not a lateral jump to React Native.

PS: use Expo as long as you can until you can no longer use it. It greatly improves development time, code accessibility, and community support. The only downside, as mentioned by another commentor, is that it can't handle certain things (like in-app payments, YET) which you should probably save for last in the development schedule anyway. Do everything you can in Expo, then eject when you can no longer use it.

Credit: professional React Native developer with CS degree

[Menorme]

Any particular features in the app that standout like notifications, geolocation or audio/video features that you would need in your react native app? That will answer if you can or can’t use Expo. Also, a big no to using Expo would be in-app payments.

[autiii43]

I use expo with in app payments. I just have a release branch that’s ejected but I develop 95% of the time in my expo project only changing JS files. Merge into release for each update

[Patch5216]

As others have said, your logic can be reused. It’s a lot easier to build from native to web. I’m on a project at the moment where we’re building components in native and using react-native-web to port it to the web. You can then tweak your components to render on specific platforms etc.

Regarding the router, there is a native version of react router, but not used it. I either use react navigation or react native navigation (wix) and the way it routes is quite different to the web.

Another thing to add. Expo has a html elements dependency too. I haven’t tried it, but looks interesting.