Blog

Ejecting your react native app just means you can use native java and objective c code and components in your react native app

Background:
While this started as a 'simple' guide to install a camera component in react native, it ends up being a guide to eject your react native app and run it in the android emulator, as preparation to using the camera component.

Note: This guide assumes you have already built a basic react native app using> create-react-native-app dev-app-01 or whatever cooler name you gave your app and you want to add camera functionality to prototype an app

Impetuous:
React Native has a native Camera component billed as 
"The comprehensive camera module for React Native. Including photographs, videos, and barcode scanning!"

Sounds cool, and the installation looks to be easy going by the instructions at
https://github.com/react-native-community/react-native-camera

And the adventure begins:

> npm install react-native-camera --save

That should work
> react-native link react-native-camera

And the first Error #1
The term 'react-native' is not recognized


You need to install react native global
> npm install -g react-native-cli

And the next Error #2
`react-native link` can not be used in Create React Native App projects.

So let's go with the manual instructions at
https://github.com/react-native-community/react-native-camera
First, to use native components, you have to 'eject' your project

Ejecting just means you can use native java and objective c code and components in your app
> npm run eject

This will create android and ios folders where you can customize the java and objective c code directly, or in the case of trying to use the camera component, add components which are written in java and objective c

Answer a few questions such as what's your project name.
I choose to not create an Expo account at this time, as uhg another account, and their site was not responding tonight.  While using the Expo app on your phone is easier than manually copying your app from your notebook to your phone, the android emulator should work for now for quick testing.
> npm start

And the next Error #3
will complain that you are running a react native app so now you have to start with android

trying again
>  react-native run-android

And the next Error #4
SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

So now you have to install android studio to get the android sdkIt's best to follow the full page of instructions at
https://facebook.github.io/react-native/docs/getting-started.html

Make sure you click the appropriate buttons
'Building Projects with Native Code'
'Windows'
'Android'
And then follow their lengthy instructions.

  • Download and install android studio (683MB + GBs for SDKs and emulators), 
  • Make sure you have the appropriate SDKs checked - the defaults worked for me
  • And add a PATH variable
trying again
>  react-native run-android

And the Error #4 again
SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

Double check that you entered the PATH in Android Studio
But that still didn't work for me,

So I created a local.properties file in the android/ folder and added
> sdk.dir = C:/Users/[username]/AppData/Local/Android/sdk

trying again
>  react-native run-android

And the next Error #5
Could not find tools.jar. Please check that C:\Program Files\Java\jre1.8.0_151 contains a valid JDK installation.

Which means you need to install the Java Development Kit aka JDK 
Which makes sense as the java code will need to be compiled
Download and install the JDK
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

trying again
>  react-native run-android

And the next Error #6
com.android.builder.testing.api.DeviceException: No connected devices!

Which means the android emulator needs to be running
So, open Android Studio
Tools -> Android -> ADV Manager aka Android Virtual Device

Create a new device
Choose Pixel 2 XL since that is fairly new
Next Next Next, just using the defaults

Click the Play button

Wait for it.
And the android emulator should be running


trying again
>  react-native run-android

Hmmm, no immediate errors
Click the app drawer (the up caret above the gmail icon)
Your app should be in the top right 
Drag it to the home screen and click


And the next Error #7
Error: Couldn't find preset "babel-preset-react-native-stage-0/decorator-support" relative to directory


Note: Babel is a JavaScript transpiler. Babel enables us to write modern ES6/7 JavaScript that will be "transpiled" to widely-supported ES5 JavaScript.

So install the babel preset
> npm install babel-preset-react> babel-preset-react-native-stage-0

trying again
>  react-native run-android

And the next Err .. no wait, it works!
Nice


With the android emulator window active, press Ctrl+M to bring up the react native context menu
Select Enable Hot Reloading


Make a change to some text in your app.js
And its updated in the phone app
Cool


OK, I didn't get to the actual camera part this time,
but there was a lot of environment initialization, and the basics seem to be working.
So till next time..

End of document. Thanks for reading.
If you develop in Windows, and deploy to Linux, and use git,
you may run into issues where Linux configuration files end up with Windows new lines ie carriage return and new line ie \r\n, thus preventing your Linux configuration from working.

Note: Check if you have the default git option of config.autocrlf=true set, or are required to by your company policy.

To keep your Linux configuration files 'clean' with just new lines ie \n
you can override certain directories or files to use a specific line ending, such as \n.

Git provides additional settings by placing a file named.gitattributes in either your code repository root, or in a subdirectory.

Note: Windows explorer will not allow you to create a dot file ie .gitattributes or .htaccessYou can copy an already created or downloaded file, and edit it, or from the command line
> echo > .gitattributes
or
> rename newdocument.txt .gitattributes

To let Git handle the automagic line endings conversion for you, on commits and checkouts.
Binary files won't be altered, files detected as being text files will see the line endings converted on the fly.
> echo .gitattributes* text=auto

You can also add additional criteria to specify whether a file is text, thus auto convert line endings, or binary, do nothing.
> echo .gitattributes
# text; auto convert line endings
*.txt text
*.h text

# binary; do not do anything
*.jpg binary
*.data binary

You can also ensures that all files that match a pattern have normalized line endings in the repository by adding a eof property; eof can be lf or crlf
> echo .gitattributes
# Ensure shell and conf files use LF.
*.sh         eol=lf
*.conf       eol=lf
*.bash       eol=lf

A large example of .gitattributes on GitHub

End of document. Thanks for reading.
Ah line endings; \r\n vs \n
Some OSes, such as Windows, prefer carriage returns and new lines: (\r\n)
While others, such as Linux and Mac, prefer new lines: (\n)

This default preference is not a problem, until you start sharing code across OSes using a version control system, like git.

For example, if your Windows ide enters \r\n for new lines, or worse, on save converts all lines to \r\n, while another developer's Linux ide enters \n for new lines, and also on save converts all lines to \n, the version control system will mark all affected lines as changed, when really it was just line endings.

To minimize the unintentional changing of line endings:

1) Developers can agree on the desired line ending and adjust their ide to save as such. The desired line ending often depends on whether the target OS for the code is Linux or Windows, matching the OS preference.

2) Git by default can help manage line endings on commits and checkouts,
by setting the config flag: core.autocrlf

config.autocrlf=true
If you’re programming on Windows and working with people who are not (or vice-versa), you’ll probably run into line-ending issues at some point. This is because Windows uses both a carriage-return character and a linefeed character for newlines in its files, whereas Mac and Linux systems use only the linefeed character. This is a subtle but incredibly annoying fact of cross-platform work; many editors on Windows silently replace existing LF-style line endings with CRLF, or insert both line-ending characters when the user hits the enter key.

Git can handle this by auto-converting CRLF line endings into LF when you add a file to the index, and vice versa when it checks out code onto your filesystem. You can turn on this functionality with the core.autocrlf setting. If you’re on a Windows machine, set it to true – this converts LF endings into CRLF when you check out code:

> git config --global core.autocrlf true

config.autocrlf=input
If you’re on a Linux or Mac system that uses LF line endings, then you don’t want Git to automatically convert them when you check out files; however, if a file with CRLF endings accidentally gets introduced, then you may want Git to fix it. You can tell Git to convert CRLF to LF on commit but not the other way around by setting core.autocrlf to input:

> git config --global core.autocrlf input

This setup should leave you with CRLF endings in Windows checkouts, but LF endings on Mac and Linux systems and in the repository.

config.autocrlf=false
If you’re a Windows programmer doing a Windows-only project, then you can turn off this functionality, recording the carriage returns in the repository by setting the config value to false:

> git config --global core.autocrlf false

Note: Above 2) sourced from Git Book

This is the recommended option if you want to manage line endings yourself; no magic = good

Note: You can also manually edit the git global config by editing the file in
> echo C:\Users\[username]\.gitconfig

[user]
    name = first last
    email = This email address is being protected from spambots. You need JavaScript enabled to view it.[

core]
    autocrlf = true

Further reading on StackOverflow

End of document.  Thanks for reading.
To install React Native, your first need to install Node.js

Node.js is a JavaScript runtime which uses an event-driven, non-blocking I/O model.Node.js can be an alternative to Java, PHP, .Net, Python, etc to develop web sites and applications using best convention frameworks such as Express.js, desktop applications using Electron.js, mobile apps using Ionic.js or React Native, to name a few of the possibilities.

Node.js is often referenced as just Node, but for easier internet searching, it is best to stick with nodejs.
Note: Node.js can be installed on multiple platforms, but if you are going to use Node.js to develop mobile apps and you want to be able to use an hardware emulator to test your development, you will need to install Node.js in your Host computer, and not a Guest VM.

Follow this guide to install Node.js in Windows 10

After installing Node.js, let’s go over some background information about React Native and the components required to go from React.js Javascript to a native mobile app.

React Native
React Native lets you build mobile apps using only JavaScript. It uses the same design as React.js, letting you compose a rich mobile UI from declarative components.  With React Native, you build a native mobile app as opposed to the more common “write once” solutions which are “web views” or "hybrid apps", such as Ionic, PhoneGap, or Outer Systems, to name a few.

Create React Native App
React Native provides a tool named Create React Native App to …. create React Native apps, without installing or configuring any tools to build native code.

Note: Xcode, for IOS in Objective-C, and Android Studio, for Android in Java, are the standard development tools to create mobile apps for their respective platforms.  React Native on the other hand, utilizes Javascript and compiles to both IOS and Android platforms.
Expo.io
React Native also relies on the library Expo.io for mobile hardware access. Expo.io allows your app to access the mobile devices camera, network, etc using Javascript APIs.  Expo is also used to build your final native binary for submission to the app store.

Expo app
The Expo app is an app you install on your development, or personal, phone to facilitate development.  The Expo app allows for hot deploys ie no compiling, and you do not have to run a hardware emulator, or install any mobile platform tools on your computer.  The Expo app is only to facilitate development.  When you are ready to build your app, you will not use the Expo app, but you will end up with your own app.

Note: If you are looking for a somewhat similar mobile development using Angular.io, Ionic is a solution which uses Cordova for mobile hardware access.  Ionic produces a web view app as opposed to a native app provided from React Native.

That’s it for the high level overview.

To install React Native,
Make a directory to store your apps, and change to that directory
> cd C:\Dev\ReactNativeApps

Install the tool Create React Native App
> npm install -g create-react-native-app

Create your first app
Warning: Renaming your React Native app is not simple with about 12 steps to be performed.
But for this initial app to just play with, any name will do.
The tool create-react-native-app will install related libraries so this may take a minute.
> create-react-native-app dev-app-01

Change to the new app directory created
> cd dev-app-01

Install and update associated libraries and start Node.js
> npm start


Warning: If you installed Node.js 8, you will most likely have the latest npm which is version 5
However, React Native does not currently work with npm 5, but it does work with npm 4.
To downgrade npm in windows, you need to start the command prompt with Administrator privileges.
Right click on command prompt shortcut and choose Run as Administrator
> npm -v
5.5.1
Downgrade npm to version 4
> npm install -g npm@4
> npm -v
4.6.1


Delete your prior app directory
C:\Dev\ReactNativeApps\dev-app-01,
and recreate it
> create-react-native-app dev-app-01
> cd dev-app-01
> npm
startPackager started!

Now you need to install the
development app for Expo.io.

Note: The Expo app is only to facilitate development.  As you make changes to your  code, and save, your changes will automatically be deployed and reflected within the app on your mobile device.  So you do not have to run a hardware emulator, or install any mobile platform tools.  When you are ready to build your app, you will not use the Expo app, but you will end up with your own app.

Expo @ Google Play Store
Expo Client @ Apple App Store

Open the Expo app on your phone, and click Scan QR CodeScan the QR Code that is in your terminal

If your app loads, great!, if it times out, then maybe your phone and computer are not on the same network.

Warning: The network interface React Native binds to may not be the same wireless network as your computer.  This will most likely occur if you have multiple network devices from installing Virtualbox or a VPN.

Type ipconfig to see your network devices
> ipconfig


You can either change the network priority, or forward the port
To change the network priority, open the Control Panel and navigate to:
Control Panel -> Network and Internet -> Network and Sharing Center -> Change adapter settings
For each network connection,
Right click -> properties -> Edit ipv4 properties -> click Advanced -> Uncheck Automatic metric
For your primary network connection, the one which the Expo app on your phone will connect to, enter a lower unique metric, such as 10.  For the other network connections, such as Virtualbox, enter a larger unique metric, such as 20.

Stop React Native, from the command prompt,
Ctrl+C
And re-start React Native
> npm start


Open the Expo app againSelect Scan QR Code or select the Recently visited app.

Your app should now load.  It may take a few minutes for the first loading to complete.

Any changes you make to your app will now be automatically reflected in your app aka hot reloading.

Open the file app.js in your app directory
C:\Dev\ReactNativeApps\dev-app-01\app.js

Note: You can use any text editor or ide, but VSCode, Netbeans, Geany, or Notepad++ are good choices.

And change the text block
<Text>Open up App.js to start working on your app!</Text>
To anything, such as
<Text>It works!</Text>

Save and the text changes should appear in your app.


Note: If the change does not appear, close the app (not minimize) and re-open it from Expo.You can also shake the phone (-sign-, why not an option in the pull down?) to show developer options and enable hot reloading, if it isn’t already.


Ctrl+C in the console to stop React Native.

Now, that was a lot of stuff,
but going forward with your next apps, it should be much simpler with just:
> create-react-native-app my-cool-app
> cd my-cool-app
> npm start