CODEWITHSUNDEEP
reactjsreact-native
Rajat
Rajat

Reputation: 34128

Porting a full blown react web app to react native

I have a full blown mobile web app using the following:

  1. React
  2. Redux
  3. Redux-React
  4. React Router
  5. Firebase

I eventually want to convert this mobile web app to a mobile app and I am looking into using React Native. There is a lot of literature on how to build React Native apps from scratch or to convert a native app in Objective-C to react native but I am struggling a bit to find some prior-art of how to approach taking a mobile web app towards native.

More specifically, what are the things that wont work out of the box? I am looking at React-Router.

Some thoughts around how to start transitioning, what to touch and what to not worry would be very helpful.

UPDATE:

Imagine the following app structure. Its already a lot of code. So, I am wondering if there are approaches to do this incrementally?

enter image description here

Upvotes: 5

Views: 6263

Answers (2)

Matt Hargett
Matt Hargett

Reputation: 1984

Many folks are porting their React applications to React Native incrementally by using Web View as an initial 'foot in the door', and then using React Native views on a flow-by-flow basis. With the recent availability of react-native-webview-bridge ( https://github.com/alinz/react-native-webview-bridge ), two-way communication between those web views and the react native components is now very easy.

There can be performance issues when using Web Views on iOS versus the regular Safari app, so that may force certain UI flows to be converted to React Native before you can ship.

I'd highly recommend translating any Selenium tests to Appium to keep your automated test coverage up. React Native is still a bit volatile, and being able to upgrade quickly and safely will be highly dependent on having an automated test suite.

Upvotes: 9

Alexandre Rivest
Alexandre Rivest

Reputation: 694

Be sure to have your API (is you have one), your reducer and your action outside of your web folder, because you'll be able to use them in your mobile app.Most of your app structure will be the same, except for the react-router. Like Jan Fanz Palngipang, you could use react-native-router-flux (which is the one i'm using) I would recommend you to check starter kit like nativebase, rReact Starter Pro to see how their drawer is working.(see how they change container)

Upvotes: 0

Related Questions