How to Install an IPA using Xcode

1. Connect the iOS device to your Mac 
2. Open Xcode
3. In the Xcode menu got to Windows ==> Devices and Simulators
4. In the Devices/Simulators window drag and drop the IPA into the Installed Apps area.

That's it; you now have an IPA on your device.

How not to debug an error message

How to make an (idiot) out of you and me

First assume that you know what the error is and don't read them message carefully.

On Thursday I was experimenting with adding a organic compass.  First tried the package react-native-compass.  However this package doesn't seems to work.  Next I tried the package react-native-simple-compass.  This package worked perfectly, although is did seems to popup a calibration screen in the beginning.  Also I had a small heart attack later when I went back to npm page and realize it said 'license none'.  However, when I went the the react-native-simple-compass GITHub site for the source code, I found it has a MIT license.  This simple package work perfect for both iOS and Android.

So I had two packages installed.  One that I am using and one I am not.  After my four days I come back and used a clean folder and pull the repo because I did want to have anything corrupted for the extra package.  Everything work fine for iOS on Monday and Tuesday.  However when I tried to build the Android I got an error message.

1 2 3 4 5

MainApplication.java:8: error: package com.welvarend does not exist import com.welvarend.CompassPackage; ^

I assumed that something wasn't working for the simple compass.  After a couple of hours of checking the gradle and cleaning a rebuilding the react-native.  I got with a friend and ask if he could help me.  As i went to the line that was the error I realized I was looking at the old package.

Bottom line, read the error message carefully.  Especially if your first pass doesn't fix the problem.

Return Whiplash

Confusing Code

Today I ran into some confusing code.

const wrapper = (element) => {
  if (this.state.myBoolean) {
    return (
      <TouchableWithoutFeedback onPressIn={this.handleAction}>
        <View
          style={{
            position: 'absolute',            

            top: 0,            

            bottom: 0,             

            left: 0,            

            right: 0,          

          }}
          pointerEvents="box-only">
          {element}
        </View>      </TouchableWithoutFeedback>    

     );  

  }
  return element;

};

return wrapper((
  <MyControl
    onCButtonPressed={this.onButtonPressed}
    activeButton={this.state.myBoolean}
  />

));

In this 20+ line of code there are tree separate returns.  Also the code doesn't go from top to bottom.  I felt like I had whiplash by the time I actually figured out what the code was doing.  I personally would have like something mare like this.

if (this.state.myBoolean) {
  return (
    <TouchableWithoutFeedback onPressIn={this.handleAction}>
      <View
        style={{
          position: 'absolute',          

          top: 0,          

          bottom: 0,          

          left: 0,          

          right: 0,        

        }}
        pointerEvents="box-only">
        <MyControl
          onButtonPressed={this.onButtonPressed}
          activeButton={this.state.myBoolean}
        />      </View>    </TouchableWithoutFeedback>  

   );

} else {
  return (
    <MyControl
      onButtonPressed={this.onButtonPressed}
      activeButton={this.state.myBoolean}
    />  );

}

It is about the same number of lines of code, but this I can follow easily.

Learning React Native - Create React-Native App

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.

react-community/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 :-)

A Splice that is not a Splice

Often when a language just evolves over the years, it go in a direction which would never had occurred if the language was developed from scratch.  Such is the case of JavaScript and 'splice' being used for a delete.  When can a 'splice' become a delete?  We all know what the word 'splice' means and what it implies.  However, in the case of JavaScript is has become a delete.

1. var myArray = [1, 2 , 3]; // [1, 2, 3]
2. myArray.splice(1,1); // [1, 3]

The word splice has now become a delete and see to be a pretty common practice in the JavaScript community.

Using Default Exports

I don't really like them to much.  Yes they are flexible; but when you go looking through code to find where they are used, the only way to be sure that you find them all is to do the following:

1. Search for the file name.
2. Look at each import and see if it is using the default.
3. Use the name of the default to search in the file

I prefer to used the named include.  Using the named to look through code is more straightforward.

1. Search the code for the name of exported.
2. All references to it will show up include the import.

The 'named' import gives a nice view of both where it is being imported and where it is being used all at the same time.  Yes, I prefer to used the 'named' import.