A month of React Native: part #1

Setting up the development environment

This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.

For this series, I’ll assume certain things. First, some basic familiarity with React and modern JavaScript (ES6/ES7). I’ve written a ton of React code in the last year, so I feel pretty confident about this. Second, I’ll be building this app on macOS. This is probably your best bet if you want to test your app on both iOS and Android (since the iOS simulator runs only on a macOS computer). Third, I’ll make use of the Expo toolset for building the app. This is the easiest way to get a React Native app off the ground, similar to create-react-app for web apps. In fact, the original create-react-native-app was a collaboration project between Expo and Facebook and is now deprecated in favor of the Expo toolset. Finally, I’ll be using yarn as the package manager. It really kicks npm’s ass in many different ways, so there’s no question here.

Photo by Braden Collum on Unsplash

The only real requirement with Expo is to have Node.js version 6 or newer installed on your computer. You can then install the expo-cli by running:

In addition to having all the development environment working out of the box, the second benefit you get by using Expo is the mobile client for iOS and Android. This really speeds up the development process, allowing you to run your app on your device(s) while you’re developing them. When you have the packager running (a word on this in a bit), it exposes a URL on your LAN that is accessible on your device (assuming they’re both on the same network). This means that any code change you make that triggers a rebuild is instantly mirrored on your device.

Additionally, you can choose to publish your app to your Expo profile. This allows you to run the app without having the packager running. Effectively, this can be used to run and test your app anywhere.

If you want to test your app on the iOS simulator or the Android emulator, you will need to install Xcode and Android Studio separately. On my end, I ended up installing Xcode only. Since I have an Android phone, I’ll be doing my iOS testing on the simulator and Android testing on my device.

These instructions are far from exhaustive, but enough to get you started. You can find more detailed installation instructions on Expo’s installation guides.

The expo CLI has a handy command for creating a blank project (expo init). It asks you for a project name (needs to be a URL-friendly name, i.e. no spaces) and also asks you to choose a template. Here I went with the blank template. The other option is the tabs template, which has a basic tabbed navigation included. I want to explore navigation separately, so I went with the blank template, as shown below:

That’s it! If you follow the instructions and run yarn start, this will start the bundler and you’ll be able to start working on your app. In my case, I had the iOS simulator installed, so I simply followed the on-screen instructions and had the blank app show up on the simulator:

For more details on how to get started with the first app, I recommend that check out Expo’s guide.

That’s it for day 1! Tomorrow we’ll be setting up the basic screens in our app and configure navigation.

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

I’m Alex, a software engineer and startup geek. Currently, I’m a co-founder at a startup called AgentRisk, where I’m the VP of Product & Engineering. In a past life, I was part of the founding engineering team at an enterprise cloud storage startup in Silicon Valley, did a bunch of cool cutting-edge projects at Cisco Research, and worked on some really innovative data center network architectures while doing my Master’s at UCSD. I always enjoy learning new technologies and b̵u̵i̵l̵d̵i̵n̵g̵ shipping side-projects all the time.

Co-founder & CTO @ AgentRisk. Former infra-tech guy (storage, networks). Startup nerd. Always building cool side-projects. #LongLA

Co-founder & CTO @ AgentRisk. Former infra-tech guy (storage, networks). Startup nerd. Always building cool side-projects. #LongLA