yusufcodes
Home
Mobile App Development
🗓 14/05/2022
So, you want to delve into the world of building apps, but want to be able to build for multiple platforms at once. You’ve probably heard of React Native as a tool to do this, and you may have also seen the term Expo used in relation to React Native.
“Are they linked? Can I use one or the other? What is the actual difference between them? ” These were some thoughts that went through my head when getting started with React Native, and I hope this blog post clears this up for you.
After reading this blog post, you should have a basic understanding of React Native and Expo, after which I will share some resources that I felt helped me when getting started. 💡
React Native is a library for building cross-platform native (iOS and Android) and web applications using the JavaScript language. As the name suggests, it builds on the React library. This means that any React knowledge you know can be conveniently transferred to the React Native world.
The main difference between React and React Native is the platform you’re building for: React is solely for web development, whereas React Native is for iOS, Android, and Web. Running an application in a browser vs. a mobile phone are totally different, so the build process of a React Native app (as opposed to a React app) is also different.
If you’re interested in the details of how your JavaScript code is compiled down to for each native platform, this article goes through it in depth. This knowledge is not required to start working with React Native, but it can be helpful to know exactly what is going on.
Expo is a third-party technology, not created or maintained by the creators of React Native, which has been built to make the life of a React Native developer easier. It does a few things, but here are a couple of big features I found useful:
Setting up your development environment is much quicker when using Expo. It abstracts a lot of the build process of the app, so all you need to do is use the Expo tool to execute your code and build your app, and it should load up in a simulator with no issues.
When building an app without Expo, you’ll be responsible for following steps to alter code for any packages that require changes to native iOS / Android code. This can be time-consuming and take away from precious development time.
Expo has a library of common packages that you can plug into your application with a single command - read more about Expo specific packages here.
Expo Go is Expo’s own app to be able to load Expo built apps onto your device. This is useful for both local development, and also when sending preview builds to clients.
Local development: When you’re running your app locally using the expo-cli tool, a local server is started. This server can be accessed by the Expo Go app, pulling in all the latest changes to your app.
Deployed app: This works similarly to a local app, except the server being hit is Expo’s own servers rather than local. Read more about how Expo works here.
For most changes to your app, you will probably be changing JavaScript code. If this is the case, and no native code is altered under the hood (for example: installing a new package that requires changes to native code by Expo), these changes can be published without re-submitting your app to the app store. This works through expo’s publish tool.
I only touched on some of the basics of React Native and Expo in the previous sections, but you can read some common FAQs about Expo here, written by Expo themselves.
Hopefully you now understand the different aspects of React Native and Expo, enough to get going with some development. Below is the path I recommend to get yourself started with building some cross-platform applications using Expo 🎉:
Access the React Native Written guide here.
These docs explain the core fundamentals of React Native, with some live code examples. There is even a section titled “React Fundamentals” if you don’t know React. (Side note: I’d recommend understanding React separately, but this section can give you a super basic overview of React if you need it).
If you don’t like written guides, I wouldn’t worry, as each section of the guide isn’t too long and as stated before, there are some live coding examples to keep you going.
Once you’ve understood the basics of React Native, you’re ready to setup your first project! To get started with Expo, you need to globally install the expo-cli tool. Run the following command in your terminal below:
### Install expo-cli
# npm
npm install -g expo-cli
# yarn
yarn global add expo-cliOnce you’ve done this, you can then create a new Expo project using the following command:
### Create a new Expo project
# Initialise your new app
expo init my-app
# Navigate into the newly created project
cd my-app
# Start the Expo Development Server
yarn start # or "npm start" or "expo start"Access the Development Environment guide here.
There’s two ways to run your app: on a simulator or on your own phone. The latter option can be achieved the quickest through using Expo (using Expo Go), whilst the first option requires some OS specific setup to run a simulator.
I personally like to run on a simulator, so I can test on a variety of devices. To get setup for this, click the tab labelled “React Native CLI Quickstart” in the guide linked above, and select your machine OS and the platform (iOS or Android) you want to setup.
Alternatively, if you just want to run your app on a physical device that you own, click the tab labelled “Expo CLI Quickstart”, and follow the steps under “Running your React Native application”.
These are some resources which I found useful when I was a React Native Engineer - some of them are purely documentation, whilst others are guides / courses:
➡️ React Native - Official Developer Guide
➡️ React Native - The Practical Guide (Udemy)
We’ve covered a fair amount of content here, but hopefully you now have an understanding of React Native and Expo, with enough basic knowledge to go and give React Native a go yourself using Expo.
If you have any questions about any of the contents on this post, reach out to me on Twitter!