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.

Assumptions

Photo by Braden Collum on Unsplash

Setting up Expo

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.

Setting up a blank project

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.

About me

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