DEV Community

How to REALLY set up a React Native environment on Mac

Rob Sherling on August 09, 2018

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 brin...
Collapse
 
memark profile image
Magnus Markling • Edited

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

Collapse
 
rob117 profile image
Rob Sherling

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?

Collapse
 
memark profile image
Magnus Markling

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?

Thread Thread
 
rob117 profile image
Rob Sherling

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

Thread Thread
 
memark profile image
Magnus Markling

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.

Thread Thread
 
rob117 profile image
Rob Sherling

Thanks, I appreciate it!

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

Thread Thread
 
memark profile image
Magnus Markling

I did not have to!

Thread Thread
 
rob117 profile image
Rob Sherling

Thank you, I appreciate the feedback.

Collapse
 
spartan318 profile image
Devin Castaban

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!

Collapse
 
rob117 profile image
Rob Sherling

100% no problem glad you enjoyed it!

Collapse
 
lcprog profile image
LC • Edited

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

Collapse
 
rob117 profile image
Rob Sherling

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.

Collapse
 
bcherry85 profile image
Bcherry85

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.

Collapse
 
rob117 profile image
Rob Sherling

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.

Collapse
 
anthonyriera profile image
Anthony Riera

Awesome article, thanks dude!

Collapse
 
peterwitham profile image
Peter Witham

Thanks Rob,

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

Collapse
 
rob117 profile image
Rob Sherling

Of course - glad that it worked for you!

Collapse
 
jasonwiener profile image
Jason Wiener

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

Collapse
 
thehanimo profile image
Hani

Thanks Rob!

Collapse
 
adamhinckley profile image
Adam Hinckley

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

Collapse
 
rob117 profile image
Rob Sherling

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.