Rob SherlingThis is basically taken from a private README that I use and cleaned up for public consumption. It doesn't really have the humor that I try to bring to these things, and I tried to keep it simple for Japanese speakers that I can point here when they need help. Very quick and dirty, may clean up later.
This is only for Mac. If you aren't using Mac for React Native dev - do it, it's pretty great.
Setting up a react native environment
Steps
Software installs and file setup
Install Xcode from the app store - Xcode is a program that runs iOS apps for you, and lets you start a simulator for your app so you can develop without needing a physical iPhone.
Install a Java Development Kit - you need this to make Android apps in React Native
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Accept license agreement, Mac OS X x64
Install Android Studio (google this). This is how we will run android simulators so we don't need an Android phone open to check our work. Now, we need to set it up.
Open Android Studio. Choose custom install. Check the boxes for
- Android SDK
- Android SDK Platform
- Performance(Intel@HAXM) - this speeds up the simulator.
- Android Virtual Device
Begin downloads.
Install Node and Node Package Manager(NPM). If you don't know what that is, literally google - install Node on MacOS. It's very painless
That will take a long time, so in your terminal, enter the following (without the $ symbol).
This will install watchman, a program that watches files and updates your app when they change.
$brew install node watchman
This will install react native so we can do cool stuff like make apps
npm install -g react-native-cli
Back to Xcode
install the xcode command line tools. In terminal:
$xcode-select --install
Add the following line to your ~./bash_profile
alias android-studio="open -a /Applications/Android\ Studio.app/"
What this does (after restarting terminal) is let you open directories by typing
android-studio .
in that directory.
Android SDK and AVD Install
Open android studio once downloads finish, click on "configure", go to SDK manager.
Click "Show package details"
Enable Android 6.0 (Marshmallow), and INSIDE Marshmallow, enable
- Google APIs
- Android SDK platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Do the above for Android 7 and 8 as well (Not necessary, but good to have for the future)
Next, on SDK tools tab, click "Show package details", look for "Android SDK Build-Tools", and make sure that 23.0.1 is selected
click apply.
append to ~/.bash_profile:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
terminal: source $HOME/.bash_profile
Confirm sdk location with echo $PATH
We just did all that because really we have no choice. That's the work necessary to make Android apps.
New project
Setup a project really quick to configure the emulators.
In terminal, start a new project with
$npx react-native init <APP_NAME>
$cd <APP_NAME>
$npm install
Note, you can use Yarn as well (google install Yarn)
Running on iOS
In a terminal, type $react-native run-ios from your react native project folder
Confirm that app runs.
SIMULATOR NOT FOUND ERROR
If it tells you that a simulator isn't found, restart your computer. Common issue on using react-native init command.
Press command+d
Enable hot reload.
Change text in app.js under ios, save, and observe instant change in simulator.
Close simulator.
Celebrate.
Running on Android
Open the project in Android Studio. (Go to the react-native directory, go to /android, then run android-studio .
Open Android studio, and open the Example App directory in it
When it says "Android framework detected", configure -> Agree
click the AVD manager icon in the upper-right hand corner (Waaaaay upper right)
Grab whatever device you want to test on, then click Next
on the x86 images tab, then look for the Marshmallow API Level 23, x86_64 API image with a Android 6.0 (Google APIs) target.
Click next, then finish.
Click the play button on your specific android virtual device to launch it. When the home screen appears, you're ready!
terminal in project root:
react-native run-android
Press cmd + m
Enable hot reloading
IF YOUR SCREEN IS WHITE:
Go to more settings (sidebar), go to settings, click advanced, then set the OpenGL ES renderer to a new option (randomly), then exit the settings, exit the emulator, restart the emulator, and re-run react-native run-android
Change text in app.js
Observe change.
Celebrate!
Editor
I was hardcore Nuclide (Atom). Now I'm all about that visual studio code.
Setting Up ESLint
This Project uses ESLint.
Source:
https://github.com/expo/eslint-config-universe
https://github.com/Intellicode/eslint-plugin-react-native
run the following in the root directory:
yarn add --dev eslint prettier eslint-config-universe eslint-plugin-react eslint-plugin-react-native
Move this file to your project root https://gist.github.com/Rob117/118443a2610af3abcbb3d8ddb8a213d1
in your package.json, add the following line under "scripts"
"lint": "./node_modules/.bin/eslint --fix *.js **/*.js"
Then just run npm run lint to lint your code.
Installing testing tools
Jest is already installed
To run jest tests: npm test -- __tests__
I realize that this is very rapidly written and might be a bit hard to follow - if any part doesn't work, let me know and I'll update it. I wrote this in a time crunch as a promise to a friend.
