Saturday, February 3, 2018

Learning React Native - Create React-Native App

 Learning React Native

Learning React Native, by Bonnie Eisenman,  Second Edition.

Nice book, reading through Safari Books Online, another product I really enjoy.
Today I am going to be installing and using Create React Native App.

/create-react-native-app


I have been using the full blown development environment, but I wanted to see what this was like.

Installing Homebrew for installing Node.js.


Following the recommendations from this treehouse article:  How to Install Node.js and NPM on a Mac by Dave McFarland.

Install Homebrew using terminal in my user folder "cd ~"

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Took it a minute or two to start on my old Mac Mini.

I believe that your account will need to have sudo privileges to install.
Also downloads the command line tools for Xcode.  I am using macOS High Sierra version 10.13.
This took a few minutes with my slow Mac Mini.
Installing Homebrew will enable 'aggregate user behavior analytics.
The install actually pulls the current Homebrew code for the github master.
Got a nice 'Installation successful!' at the end.

Node is not installed, so i will install in now using Homebrew.

$ brew install node

Got a message that my Xcode (8.2) was out of date.  Recommends that I update it from App Store.

App Store says I already have 9.2, but brew is saying 8.2.  

Looks like the 9.2 Xcode was not fulling stalled.  Installing components...

Still getting the same error in home brew.

Xcode says it is 8.2.  Looks like I had Xcode and brew wrote over it.

Uninstalled from Mac than installed from App Store.  Had to sign into my Apple account to download Xcode.

Ok, now I am running with Node v9.5.0.

Installing the Create React Native App package:

$ npm install -g create-react-native-app

Creating my first project boilerplate application

$ create-react-native-app first-project

Getting an error that 'npm 5' is not supported.

Installing yarn

$ brew install yarn

I seem to remember hearing that the problem is related to the package-lock.jason file.

$ rm package-lock.json

Cleaning out the first-project try.

$ rm -rf first-project

Trying to create the package again.  Seems to be using yarn this time.

Looks like I will need to use yarn to run package.  Also seems to note that package lock file had been removed.


$ cd first-project/
$ yarn start

Says to install watchman or use the following:

  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

Installing watchman using Homebrew since I have it installed now.


$ brew update
$ brew install watchman

OK, third or fourth try is a charm!

$ yarn start

I already have the Expo Client installed on my iPhone.


When starting the app is saw my Mac-Mini.


Show my previous attempt where I was only using my iPhone.
Using the scan code to load the project.
  • Building the JavaScript bundle ...


This seems to take a few minutes.  Not sure if that has to do with my Mac-Mini or not.  I am running with an iPhoneX so I don't think the phone is bing slow, but I am on power saving mode on the phone.

Finally loaded.



Woe, this does more than I would expect, especially the Debug Remote JS.

Looks like I need to set the 'Access-Control-Allow-Origin' for that to work.


Turn off remote debugging.

Opps, app crashed.

Restart the project.



Editing the App.js file in Xcode, which my Mac Mini is struggling to start.
Xcode seems to be installing some components.... and installing ... and installing...

And with a little modification of the App.js file ...


OK, that's all I have time for today :)

P.S.  Notice this following command.  

$ yarn run ios

Failed even after I start the simulator by hand.  I'm pretty sure that I could get it to load using Xcode, but that may be a little more work then I want to do right now :-)