loading...

How to REALLY set up a React Native environment on Mac

rob117 profile image Rob Sherling Updated on ・4 min read

This 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.

Posted on by:

rob117 profile

Rob Sherling

@rob117

I work in Japan and am fluent in Japanese. Get in touch if you want to chat / work together!

Discussion

pic
Editor guide
 

Great work!

There is one thing I was not able to follow. For the Android Simulators, this instruction
"Grab whatever device you want to test on, then click Next
on the x86 images tab..."

I am unable to find "Next" (is it a button, a link, or something else?). This is what it looks like on my mac:

thepracticaldev.s3.amazonaws.com/i...

 

Thanks!

When you first downloaded those example devices, it should have given you the ability to choose the available APIs for it (I think, I hope). Did you get a chance to choose, and if not, do you get a chance to choose if you create a new virtual device?

 

I didn't specifically download any devices. IIRC I just downloaded Android Studio and installed it according to the instructions.
If I create a new device, or edit an existing one, I first get to choose a "hardware profile". Once that is done, I can select a "system image", a listing of images, each corresponding to an API version such as the one in the post. Is this what I need to do then, create a new device instead?

I believe so. Try that and let me know if it works!

That works, thanks!

Just to be clear, I was able to use one of the original simulators as well. I just wanted to point out that part of the article might need some modifications.

Thanks, I appreciate it!

So you didn't have to create a new device?

Thank you, I appreciate the feedback.

 

This was a wonderful tutorial, easy to understand, concise steps. Best tutorial I could find for getting react-native running on a mac, thanks for taking the time to pull this from your README and clean it up man!

 

100% no problem glad you enjoyed it!

 

Hello Rob, this is a great article but unfortunately after doing EXACTLY your install recipe multiple times, the react-native build comes up with tons of errors in both iOS and Android run commands and after googling the errors I come up empty.

are u available to some chatting?

thanks again

 

I think there was a problem with Dev.to's notification system. I kept seeing notifications for my articles, but couldn't actually read their contents. I am sorry for the delay in responding.

I need to revisit this article sometime - React Native is a fast-changing ecosystem with a lot happening - just last year, autolinking libraries became a thing and changed a lot of how everything worked. Fast reload functions differently - you can reload screens in-place now when you save your code!

Unfortunately, because of the variance with any given install and your own personal setup (node version, ruby version, xcode and os and Android Studio versions) that I can't help any individual do an in-depth troubleshooting of their own setup.

 

this is a great resource, thank you! However, I'm having trouble when I run $react-native run-ios. my terminal tells me: -bash: react-native: command not found.

clearly I've done something wrong but I'm not sure what.

I'm brand new to React Native.

 

I think there was a problem with Dev.to's notification system. I kept seeing notifications for my articles, but couldn't actually read their contents. I am sorry for the delay in responding.

I imagine that you've solved this, but you have to install the react native cli with a global flag. Something like npm install react-native-cli -g, but please check the actual command first.

 

Awesome article, thanks dude!

 

Thanks Rob,

This helped me get set up and running in no time at all. Appreciate the very precise and easy to understand steps.

 

Of course - glad that it worked for you!

 

super helpful. thanks for taking the time to do this!!!

 
 

Pardon me for being a little naive, but what exactly do I need to do with these two lines?

terminal: source $HOME/.bash_profile

Confirm sdk location with echo $PATH

 

Ah, not a problem. So, in your terminal (command line prompt):

source $HOME/.bash_profile
is the same as writing
cd ~ && source .bash_profile

What it means is, "run the command source on the file '.bash_profile' in our home directory, which will update our current terminal to use the new code that we wrote there".

Basically, bash terminal reads this file every time it starts a new process (open a new tab/window). In order to use the newly appended path variables, we would need to restart the terminal so it rereads the file. The above command lets us reread the file without restarting terminal.

If that doesn't make sense, please let me know.

"Confirm sdk location with echo $PATH"

Means, in terminal, run
echo $PATH

and look at the output. If correct, the SDK that we added in the previous step should be in there somewhere.