React-Native with Windows 10 and XE Player

Pre-Amble

When it comes to creating great Apps [real Native ones] in 2018, the defacto choice is React-Native, but before you can get down to development you need a productive IDE to make this happen. This is how you do it and more importantly with all the latest releases [March 2018].

React-Native: V. 0.54.x

Windows: 10 build 1709

XE Player: 3.8.x running Android 4.4.x [a.k.a. KitKat]

You don’t need an i7 with 16Gb of RAM

Well you sort of do, if you wish to run Android Studio and its AVD Manager, which is frankly dreadful and super slow. This path is paved with despair. With the above, if properly configured, you can easily use an AMD with 4-8Gb RAM and it will be very fast and allow you to code and not waste pointless and frustrating `watch` time.

Some Version issues

If the above was all out of the box then I wouldn’t be writing this blog and you’d just happily install everything with npm [node package manager] and away you would go. Anything BUT and the .net is full of try this and fudge that nonsense and this might work and a lot of it comes down to the fact that if you use the wrong version of something then it won’t work [currently] and of course you need to ensure that your APP works on Android 4 and above, not just the latest version.

Java and Android [SDK] Install

Install Java 8 [not 9] Win x64 - Web Download

Android Studio [lastest version is fine] and install the SDKs for 4.4.x [KitKat].
We'll only be using 4.4.x here as that's the version used by all the emulators, e.g. XE, NOX - the ones which play games.

NodeJS

Latest version is fine – at the time of writing – Web Download

Node: 8.10

npm: 5.6.0

React

c:\…>npm installg react-native-cli

react-native-cli: 2.0.1

react-native: 0.54.3

XE Player

Free download from the Web. Stress again that this is running a pretty old version of Android though.

Walk Through

The install of all the above is quite perfunctory, albeit rather time consuming. Once done, we’re ready to create our perfect IDE:

 1. Create your React Native App from the command prompt:

c:\....\>react-native init app-name

Open Android Studio with the app-name/android folder as an existing Project and accept all the require this options, DO NOT accept any Gradle upgrades [see future post]. Then build your App just to make sure that it is Android Studio happy! You can do this after the XE Player install if you prefer.

2. Fire up XE Player

…and enable root-startup [very top `gears` icon] -> General Settings. Then after a restart, go to the Settings Icon/App and right at the bottom you’ll see About Tablet  – click on this and then click the Build number several times to enable developer mode.

Skip back [top left <] and then click on the new { } Developer options and put a tick in the USB debugging box. All of this will require a restart of XE Player.

3. Back at the command prompt, cd into the app-name folder and run:

c:\....\app-name\>react-native run-android

This will create your app on the XE-Player and it won’t work because of inconsistencies between Android KitKat and the lastest React, so:

mkdir android/app/src/main/assets, i.e. creating the folder assets or do this in, say, Sublime Text

then edit your package.json file with the following scripts section

"scripts": {
 "build": "(cd android/ && gradlew assembleDebug)",
 "start": "node node_modules/react-native/local-cli/cli.js start",
 "bundle-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/",
 "test": "jest"
 }

The items in pink are of note.

4. Rebuild the App

npm run bundle-android

npm run build

npm run start

Add the new App from XE Player using the `Add APK File` which is on the right hand side vertical menu [the up-arrow in a box]. FYI: npm run build creates the .apk – you don’t need Android Studio for this.

Select the file …app-name/android/app/build/outputs/apk/app-debug.apk

Click on the new icon and all should be well !

5. Enable APP reload

This is a bit fiddly and merits an explanation:

The Metro Bundler you just started on port 8081 [npm run start] is your development server and its IP address is the IP of your PC, so run

c:\...>ipconfig

and note the IP address of your PC; we’ll say here, by example, that it’s 192.168.1.120. Good idea if you can fix this via your DNS, perhaps with the Ethernet MAC address. So the server is 192.168.1.120:8081 [note the colon and not a period].

in XE Player, click on the `menu` [RHS Hamburger] and choose Dev Settings. Then click on the area [not very clear] which says Debug server host and port for device and enter 192.168.1.120:8081.

Then restart your npm run start command prompt window. The first time it will have to re-build, but thereafter any file-save changes you make in the code will be ‘almost immediately’ reflected in the XE Player window – awesome.

6. Change some code

Edit your App.js file and perhaps change some default text – Hello World if you like.  Save your changes and then you should see the Metro Bundler create a new ./index.js box showing an update and ta-da the App is changed.

7. Summary

You have XE Player open [uses hardly any RAM] and one single DOS or command prompt. That’s it and you have a lightning fast IDE system for your Apps. None of that i7 16Gb and huge rebuilds [a SSD recommended] and not to mention the dreaded Android Studio in the background chewing up resources.

Enjoy….

Leave a reply:

Your email address will not be published.

Site Footer