What is the quickest way to convert a React app to React Native?

Question

This may be a naive question, but I couldn\'t find too much information on this topic. I have a fully functional react-redux application and I would now like to port it to

Answer 1

You have to refer the react native structure to actually understand how to convert your react app to your react native app.

To start from scratch I would suggest: https://reactnative.dev/docs/getting-started

Answer 2

They're usually pretty separate, partly because your render target is different (i.e. no divs) and partly because of things like window not being available. It's possible to reuse code between web and native apps, but only if you're very careful about it.

From the react native release blog post:

It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform

Answer 3

As others have mentioned there's no quick way to convert react to react-native.

A possible alternative if you want your react app to run on a mobile device without rewriting your codebase is to use Cordova. For fun I ported a react-web app into a mobile app using Cordova in just a few minutes. There are some drawbacks to this method, but the benefit is that you can have a working mobile app in very little time.

Below are the steps if anyone is interested in a Cordova workaround alternative:

REACT SETUP (done in command line)

>1. npx create-react-app my-app
>2. cd my-app
>3. npm start

DEPLOY TO STATIC:

>1. Update your package.json file from your my-app directory to add "homepage":"." (see below)

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage":".",
  "dependencies": {

>2. Build (in command line) npm run build

CORDOVA INTEGRATION (in command line)

>1.  cd ../ (change to wherever you want the project created, don't do this inside your existing react app folder)
>2.  npm install -g cordova (only if you already don't have Cordova installed)
>3.  cordova create MyApp 
>4.  cd MyApp
>5.  cordova platform add ios //or android or browser

ADD A COUPLE STEPS FOR INCLUDING YOUR REACT PROJECT

>1. Open your Cordova MyApp www folder, delete all files and folders in it except for the 'js' folder
>2. Back in your react build folder update the index file to add two cordova scripts:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

>3. copy all your files from the react build folder into the Cordova www folder (replacing everything except the js folder)

BUILD REACT-CORDOVA APP (in command line, inside your Cordova project)

>1. cordova build ios //or android or browser

TEST OR DEPLOY TO STORE ETC.

>1. Use xcode to open open your react-cordova .xcodeproject, this can be found in the MyApp/Platforms/ios/
>2. Select your simulator and run.  Enjoy your new mobile app!

TWEAK There are some minor tweaks you'll need to do (like remove the tap delay...etc) -I think this is why people think Cordova apps are slow, but it's an easy fix...

Answer 4

WebViews and React-native are two completely separate concepts. Either you want to go with the former (than you can actually use your application without much hassle), or with the latter. In that case, you could probably re-use some of the business logic, however most of the rendering would have to be rewritten.

React native is learn once, write anywhere, not learn once, write once :)

Answer 5

Some of the reusable things are styles:

var style = {
     box: {height: 30, width: 30, padding: 10, ect...}
}

Logic such as state :

constructor(props){
 super(props);

 this.state= {text: "hi"};
}

the state can be shared between navite and dom like so

<View>
<Text>this.state.text</Text>
</View>

dom looks like this

<div>this.state.text</div>

You can even share functions but you have to be careful like it was stated above, as long as you're not directly invoking any dom or refs in your logic.

onClick(){
 this.setState({text: "good bye"});
}

Answer 6

You cannot just use your whole code into the react native application. First and foremost, you have to follow the react native architecture and then develop your UI using react native components. https://facebook.github.io/react-native/docs/getting-started.html You'll get most of the help here.

There is another option also, you can just create a new react-native project and use webview in it and display your whole website there. https://facebook.github.io/react-native/docs/webview.html