Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 iOS and Android. I have no need to use any native features like GPS or Camera etc. In theory I just want to make a sort of webview that runs the existing React app, and then tweak it until it looks more presentable. My first attempt was to simply use my current jsbundle file and stick it into the AppDelegate as the jsCodeLocation. That expectably caused all sorts of errors such as "window" not being defined.

I guess my question is: how do people usually manage their native and non-native codebases? Are they completely separate, or is there a way to recycle most of the code?

like image 924
tbogatchev Avatar asked Feb 17 '16 17:02

tbogatchev


People also ask

How easy is it to convert react to React Native?

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.

Is it possible to convert react app to React Native?

Convert React to React NativeIt's certainly possible to take React applications and replicate their functionality and looks of UI. However, it's not possible to copy the code directly. React Native has a different architecture, and developers must follow these instructions when creating UI components.

Can you quick react to native?

They are easily resolved by using a third-party library called react-native-fast-image. It is available for both iOS and Android and is efficient at caching images.


1 Answers

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...

like image 128
Paul Schorey Avatar answered Oct 13 '22 05:10

Paul Schorey