React native 101: Set up your first React Native Project With Expo

So you have been a Frontend developer for a few months, or maybe years and you feel the need to explore the world of mobile app development, how cool would it be to download an application you built from the App Store or PlayStore right?

Building web applications is very interesting, but who said you cannot build other apps beyond the web?

For the longest time, it has been common knowledge that mobile apps were built using programming languages like Java and Kotlin for Android phones, and Swift and Objective-C for iOS devices. These are the native languages that developers typically use to build applications for the two operating systems, although Kotlin and Swift have become the preferred choices in recent years.

So now you have to learn two new languages to start building your first mobile application, sounds daunting, right?

In 2015, Facebook (now Meta) developed React Native, a JavaScript framework that enables developers to build mobile applications for both iOS and Android devices using a single codebase. So, what does this mean for web developers like you and me?

As a web developer with knowledge of JavaScript and React, you can transfer these skills to build your first mobile applications for both iOS and Android using React Native, without needing to learn two new languages. This also allows you to manage the entire application from a single codebase

React Native has since been adopted by many companies for their development process. Not only does it save time due to its cross-platform compatibility and faster build times, but it is also supported by a large community of JavaScript developers, providing access to plenty of resources, libraries, and tools for efficient development. If you're in doubt, take a look at popular everyday apps built with React Native, such as Uber Eats, Facebook, Skype, and Instagram, just to name a few.

In this guide, you will learn how to set up your first React Native project using Expo, a framework built on top of React Native. You can think of Expo as being to React Native what Next.js is to React—an additional layer that simplifies the development process.

Now let’s get you started building your first-ever mobile application!

Prerequisites

• A Mac or Windows machine.

• Basic knowledge of JavaScript/TypeScript and React.

• Familiarity with the Command line.

Step 1: Install Node.js

To run JavaScript code outside of the browser, you need Node.js, which sets up the environment for React Native code to run smoothly. Node.js also comes with a package manager (npm), making it easy to install packages and libraries that help us build seamless applications. If you do not already have Node.js installed on your machine, click here to get started.

Step 2: Install Expo CLI

Type the following command on your terminal window

npx create-expo-app@latest NewProject

The create-expo-app command creates a new React Native project with the Expo package already installed. The @latest flag ensures that you are installing the most recent version of Expo that has been released. NewProject is the name of your project, so feel free to get creative with this name!

Once you run this command, a new project directory will be created, complete with all the necessary dependencies to get your project up and running locally.

Step 3: Run your Project on a Physical device

• Now that you’ve successfully created a project, it’s time to see what it looks like. Expo allows you to easily preview your app on an actual device. Let’s get started:

  Note: To run your Expo app on a physical device, ensure that both your computer and device are connected to the same Wi-Fi network.

  1. Navigate to the directory you just created by running:

      cd NewProject
     

     This command points to the project folder you created.

  2. Run the following command in your terminal:

      npm start
     

     A QR code will automatically be generated in your terminal.

  3. Download Expo Go for free from your App Store or Google Play Store.

  4. If you’re using an iOS device, scan the QR code from your terminal with your Camera app. If you’re using an Android device, use the QR code scanner in the Expo Go app.

Once you’ve successfully scanned the QR code, your app will load and open in Expo Go.

Once your app is fully loaded in Expo Go, it should open at the root route of your app, as shown in the image above. This root route can be found in the index.tsx file located in the app folder within your project directory.

If you prefer not to preview your app on an actual device, you can run your application using the iOS Simulator or the Android Emulator. Learn how to set up the simulator and emulator here.

Additionally, you can view your app on a web interface via the default address http://localhost:8081, which is provided in the command line when you run npm start.

Note: The iOS Simulator can only be used on a Mac device.

Step 4: Make your first changes

Congratulations! You have successfully created your first React native project with Expo, now let’s kick things up a notch by making some changes to the default codebase.

• Navigate to the app folder within your project’s folder structure.

  1. Open the tabs folder to view the list of sections within your app. By default, you should see the index.tsx and explore.tsx files, which represent the two sections of your app.

  2. Click on index.tsx, which serves as your root route, and clear the existing block of code in the file.

  3. Add a simple component to the index.tsx file as shown in the image above. Click here to learn more about core React Native components.

Here’s how your home screen should look after you have made the changes. You may need to adjust some styling, such as changing the text color or the background color, to ensure all your components are visible.

Styling in React Native takes a slightly different approach compared to styling in web development, but it is not a concept that is too far out of the ordinary. As a web developer with knowledge of HTML and CSS, this will be a walk in the park for you. Learn more about Styling in React native here.

Troubleshooting Common Issues

• Unable to install the Expo CLI: Ensure that you are running the command on the latest Node version, you can check your current node version by running node -v. Visit https://nodejs.org/en to install the latest version of Node.

• App not opening on Expo Go: Make sure that both your computer and mobile phone are connected to the same Wi-Fi network for a smooth experience.

Conclusion

And there you have it! We’ve come to the end of this guide, and I hope you have successfully set up your very first React Native project. React Native is one of the leading frameworks in the industry for building cross-platform mobile applications without the need for knowledge of native programming languages like Swift and Kotlin.

In our upcoming articles, we will explore more features and functionalities that can be achieved with React Native. Feel free to leave a comment below on what topics you would like to learn about!