The past month or so I’ve been reading up on React Native.
Coming from a Java world of “Write once, run anywhere”, React turns this paradigm on its head with “Learn once, write anywhere”
1. Install homebrew
Homebrew, in order to install the required NodeJS, in addition to some recommended installs.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2. Install nodejs
Use Homebrew to install Node.js.
NodeJS 4.0 or greater is required for React Native. The default Homebrew package for Node is currently 6.0, so that is not an issue.
brew install node
3. Install the React Native command line tools
The React Native command line tools allow you to easily create and initialize projects, etc.
npm install -g react-native-cli
4. XCode - if you are using a mac
Xcode 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install git as well.
Watchman is a tool by Facebook for watching changes in the filesystem. It is recommended you install it for better performance.
brew install watchman
Flow, for static typechecking of your React Native code (when using Flow as part of your codebase).
brew install flow
7. Android - Install Android Studio
Get it here: https://developer.android.com/studio/index.html
8. Use the android cli tools
Add the following lines to your ~/.bash_profile where
export ANDROID_HOME=/Users/<username>/Library/Android/sdk/ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
9. Install the Android Build Tools
Run the following command:
android list sdk -a
Which will provide you a list.
We opted to install
8- Android SDK Build-tools, revision 23.0.1
So the next command was:
android update sdk -a -u -t 8
where 8 was the option to install from the list provided.
10. react-native init AwesomeProject
react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/username/workspace/AwesomeProject
Installing react-native package from npm... Setting up new React Native app in /Users/username/workspace/AwesomeProject AwesomeProject@0.0.1 /Users/username/workspace/AwesomeProject └── firstname.lastname@example.org To run your app on iOS: cd /Users/username/workspace/AwesomeProject react-native run-ios - or - Open /Users/username/workspace/AwesomeProject/ios/AwesomeProject.xcodeproj in Xcode Hit the Run button To run your app on Android: Have an Android emulator running (quickest way to get started), or a device connected cd /Users/username/workspace/AwesomeProject react-native run-android
11. Next lets run the android version
Start your android emulator in ADB (you might have to create one first)
Enter the AwesomeProject directory
Next lets run the android version
This really will take a while; it’s a long process.
You’ll then be greeted with the AwesomeProject blank screen running on your device. (Not even a miserable Hellow World)
12. Install Gradle
brew install gradle
Create the following file: ~/.gradle/gradle.properties
Add the following: