Building Your First Mobile App with React Native and Expo: A Comprehensive Guide

Photo by freestocks on Unsplash

Welcome, My dear friend, to the exciting world of mobile app development with React Native and Expo! if you already have a basic understanding of HTML, CSS, and JavaScript, and a fundamental knowledge of React, you’re well-positioned to take the next step in creating powerful and efficient cross-platform mobile applications.

The landscape of mobile app development is evolving, and React Native and Expo are becoming increasingly popular tools in the industry.

In today’s fast-paced world, mobile app development has become an essential requirement for businesses to remain competitive. However, with the constantly evolving technology landscape, developers are always looking for new and better ways to build mobile applications. This has led to the rise of React Native and Expo as popular tools in the mobile app development industry.

In this guide, we’ll walk you through the fundamentals of React Native and Expo, help you set up your development environment, and guide you in creating your first mobile app.

· React Native — Learn Once, Write Anywhere
· Expo — Create Amazing Apps That Run Everywhere
· Setting Up Your Development Environment
∘ Prerequisites:
∘ Create a New Expo Project
∘ Understanding the Project Default Codebase
· Run the App
· Iterating on Your App
· Homework:
· Additional Resources:
· Conclusion

React Native — Learn Once, Write Anywhere

React Native, built on the popular React library, enables you to develop native iOS, Android, Windows, MacOS, and web apps from a single codebase. This “learn once, write anywhere” philosophy allows you to leverage your existing JavaScript and React knowledge, making it a seamless transition into mobile app development.

React Native · Learn once, write anywhere

Expo — Create Amazing Apps That Run Everywhere

Expo is a set of tools and services that simplifies React Native development. It provides a development server, a build system, a publishing platform, and various APIs for common features like push notifications and authentication. Expo is an excellent choice for rapid app development without delving deep into the intricacies of native development.

Expo

Setting Up Your Development Environment

Before building your first app, let’s ensure your development environment is set up correctly. Follow the below steps:

Prerequisites:

• Node.js LTS: Ensure Node.js is installed on your machine. You can download it from nodejs.org.
• JavaScript Package Manager (npm or yarn): npm comes with Node.js, but you can also use yarn if you prefer.
• Code Editor (Visual Studio Code Preferred): Download and install Visual Studio Code, a lightweight and powerful code editor.
• Expo Go App: Install the Expo Go app on your physical device from the App Store or Google Play.
• Git for Source Control: Install Git from git-scm.com.
• Watchman (for Linux or macOS users): Install Watchman for file watching on Linux or macOS.

Create a New Expo Project

Open your terminal and run the following commands:

# create an expo app called PrayerTime
npx create-expo-app PrayerTime

# navigate to the newly created project folder
cd PrayerTime

# open project folder on VS code
code .

This will generate a basic project structure. Now, open the project in Visual Studio Code to explore the files and folders.

Understanding the Project Default Codebase

Let’s take a look at the newly created project PrayerTime codebase which is created based on an Expo project template to help you get started with minimum effort.

Initial project setup with Expo project template

Files and Folders

• assets: Contains app splash icon and app icon-related static assets.
• App.js: The entry point of your Expo React Native app.
• app.json: Configuration file for Expo build setup.
• babel.config.js : Babel config file for converting and polyfilling JavaScript code.
• package.json : Holds package information and scripts for running, testing, and building commands.

Run the App

Now, with your project set up, run the app using npm start. This will open the Expo DevTools in your browser, and you can scan the QR code using the Expo Go app on your physical device to see your app live.

# open the vs code terminal
CMD + ~

# start expo server
npx expo start

# scan the QR code to run the app on Physical devices over Expo GO app or

# if you have a Simulator setup then you 
# can run the app on iOS simulator by pressing i on the terminal or

# if you have a Emulator setup then you 
# can run the app on Android Emulator by pressing a on the terminal

Start Expo Server

Iterating on Your App

As you make changes to the App.js file, you'll experience hot reloading, allowing you to see immediate changes on your device.

The Expo Go app supports the Hot Reloading feature to reflect your changes immediately which you can see.

Let’s change the App.js code to change the background color and sentence

Code changes and live reflection

Hooray, you did it 🎉

Homework:

• Add Static Content: Use React Native’s View and Text components to display static content in your app. Experiment with styling to enhance the visual appeal.
• Explore Expo APIs: Investigate and implement Expo APIs for features like push notifications, in-app purchases, and authentication.

Additional Resources:

1. React Native Official Documentation: A comprehensive guide to React Native.
2. Expo Documentation: Explore Expo’s documentation for in-depth information on various tools and services.
3. React Native Tutorial for Beginners by Mosh
4. Learn React Native by Codecademy

Last but not least, I found another great resource about Starting an expo app by Thoughtbot which gives you some extra guidance so that you can start with additional tools and plugins, such as TypeScript, ESLint, Prettier, Jest, and React Native Testing Library

Starting an Expo App

Conclusion

Congratulations! You’ve taken the first steps towards building mobile apps with React Native and Expo. Remember, the learning journey is ongoing, and the vibrant communities around these technologies are there to support you. Experiment, explore, and have fun building your first mobile app! If you have any questions or need further guidance, feel free to reach out to the community.

Happy coding!