A month of React Native: part #1
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.
Setting up Expo
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.
Setting up a blank project
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.