React Native setup (development environment and linting)

react-native-setup.md

Index

• Android setup
• iOS setup
• Linting with ESLint

Android setup

• Java 8 must be installed on the computer (NB: later version than 8 might not work - casks are applications with a GUI, the first command is necessary so that you can install alternate vesions of a given cask):

brew tap cask/versions
brew cask install java8

• Point to the android sdk installed locally:

  • Go to the android/ directory of your react-native project
  • Create a file called local.properties with this line:

sdk.dir = /Users/USERNAME/Library/Android/sdk

• Accept all licenses in the SDK if not done already: cd to /Users/romainchambe/Library/Android/sdk/tools/bin then run:

./sdkmanager --licenses

• in android/app/build.gradle, the following line needs to be edited to:

implementation "com.android.support:appcompat-v7:27.+"

Run the emulator

An emulator need to be running in order for react-native run-android to work.

• To open the emulator in the command line, after having added in the android studion Virtual Devices manager, edit your bash_profile to have the avdmanager and emulator commands available:

export ANDROID_HOME="/Users/romainchambe/Library/Android"
export ANDROID_SDK="/Users/romainchambe/Library/Android/sdk"

export PATH="$ANDROID_SDK/platform-tools:$PATH"
export PATH="$ANDROID_SDK/emulator:$PATH"
export PATH="$ANDROID_SDK/tools/bin:$PATH"

• check the names of your registered devices:

avdmanager list avd

• open a given emulator (you can save the names of devices as variables in your bash_profile to avoid running the command above):

emulator -avd <EMULATOR_NAME>

iOS setup

• in RN 0.57.1, it was needed to reinstall the following dev-dependencies to make it work:

npm install --save-dev @babel/core
npm install --save-dev @babel/runtime

• just run:

react-native run-ios

Linting with ESLint

These steps will install Airbnb's linter config. Their rules can then be overriden with your own in the rules parameter of your .eslintrc file.

Step 1

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

Step 2

Run this command:

eslint --init

Select 'Use a popular style guide' > Select Airbnb > then answer the questions.

Step 3

Restart your editor

Step 4

Paste this into your .eslintrc.js (in case you chose JS in the setup): and remove my comments which will cause the JSON to blow up

{
    "env": {
        "node": true, // this is the best starting point
        "browser": true, // for react web
        "es6": true // enables es6 features
    },
    "parser": "babel-eslint", // needed to make babel stuff work properly
    "extends": "airbnb"
}

If there are expo eslint settings, they will fit on top of these.