I’ve been an app developer for years but recently had to work on a project that required me to create a React Native app with Expo. Expo is pretty easy to set up and use but I definitely found a few holes in the documentation online, so I’ve documented the steps to help you build an Expo app.
In summary this post will tell you how to :
- Create a new Expo app project
- Create a git repo and push your code into it
- Run and debug an Expo app
The next post will show you how to :
- Set up basic navigation (a Stack Navigator) using ReactNavigation
- Add Tab navigation to your Expo app, and combine it with the StackNavigator
- Add Drawer Navigation to the app
- Apply some styling
I’m using Visual Studio Code on a PC to create this Expo app – I’m presuming that you’re already familiar with Visual Studio Code and the fundamentals of app development. I’ll also presume that you know the basics of using a command line tool and using Git repos. For all of this you can use CMD or Git Bash. I prefer Git Bash but it does occasionally have some issues with Expo, so bear that in mind and try CMD if that happens.
Get Started creating your app – Install the Expo client
The very first time you create an Expo app you will need to install the Expo CLI. In your command line tool of choice (Command or Git Bash), type:
npm install --global expo-cli
If you get an error message about npm not being recognised, then you haven’t yet got node package manager installed, and you will need that. In which case follow the instructions here – https://www.npmjs.com/get-npm and then try again.
1. Set up your new Expo project
Expo have plenty of documentation available at https://docs.expo.io/ so some of the process of creating a new React Native app with Expo is covered – do take a look. I’ve summarised the key required steps here. In summary. At the command prompt, navigate to the folder where you want your project folder to be, and type:
expo init my-project
….. where my-project should be the name of your new app. For this example we’ll call it myapp, so :
expo init myapp
Once you’ve typed that on the command line and pressed return you’ll see a question prompt asking you what type of project you want to set up. Choose the basic option from the Managed Workflow section and press return.
You’ll see lots of packages being installed. Once it’s finished type this on the command prompt:
That moves you into the directory of your new app. Type npm install to ensure React Native is installed. So your project framework is created, now you need to set up a git repo.
2. Set up a git repo for your Expo app
Create a new git repo for this project on github – I’ve now created a repo called myapp. Now we need to tell the local repo to connect to this remote repo. Presuming that you are still in your new project root directory with the command line tool open, type –
git remote add origin https://github.com/yourNameHere/myapp.git
… press return, and then type this to push your project code so far –
git push --set-upstream origin master
At that point you’ve created your blank Expo project, created a git repo and pushed your Expo project to the master branch. It’s worth checking that the Master branch in this new repo in github is showing that you just pushed your new Expo project code to it.
3. Test Your Expo App build Setup
Before we go any further, let’s make sure your basic Expo app set up is working ok. So first of all you need to start expo, by typing this in your project root on the command line:
You’ll see the Expo window open in your browser. With the camera of your device, scan the QR code and follow the prompt to open the Expo client. Please note it defaults to LAN, but quite a few routers are configured to block your local IP address, mine included. If you select Tunnel, the QR code will reload and it should run fine.
At this point you’ll see the code start to load on your device and you’ll see a basic app home page on your device. You can leave this running while you start to edit your code……
4. Edit your Expo app
Now go back to Visual Studio Code and open your Expo project, then open the App.js file, it will look like this:
Now change the text that says “Open App.js to start working on your app!” and change it to some of your own text, then save the file. This change will automatically be pushed to the Expo client, so if you now look on your device, you will see your new text. And that’s all the basics of how to create a React Native app using Expo.
5. Continue to create your React Native App with Expo!
If you want to just download an Expo skeleton app then download from my github repo here – https://github.com/EmilyChristy/expo-skeleton