React Native setup with Expo

October 5, 2023

Expo is a set of tools and services built around React Native and native platforms that help you develop, build, and deploy React Native apps.

💡

I recommend using Expo instead of a classic React Native setup with the CLI, as it is easier to work with and provides you with a better developer experience.

Expo Go Sandbox Application

We will develop your app in the Expo Go application, which can be downloaded from the app stores.

Expo Go is a free, open-source sandbox for learning and experimenting with React Native on Android and iOS devices. You can install it directly from app stores and get up and running within minutes — no need to install a native toolchain and compile an app.

You'll need either an iPhone, Android device, or Android/iOS simulator. You can install an iOS simulator by installing Xcode, and an Android emulator by installing Android Studio.

Scaffolding a New Expo Project

You can get started with Expo by cloning the project I created on GitHub. I've created a repository with fixed package versions to keep this article relevant for longer.

git clone https://github.com/jamzi/introduction-to-react-native-with-expo

Checkout to the branch 1-react-native-setup-with-expo and install the packages (yarn / npm install).

I've used Expo CLI to scaffold a new Expo project with TypeScript. If you want to try out the CLI tool, use the following command:

npx create-expo-app -t expo-template-blank-typescript

💡

I recommend using TypeScript with React Native projects, as it will help you write better and more robust JavaScript code.

Generated Code

Let’s take a look at the generated code that create-expo-app produces. If you have already worked with JS projects, it will look similar with:

  • package.json: JSON file with basic app info and dependencies.
  • tsconfig.json: TypeScript configuration file with some basic generated options.
  • babel.config.js: Babel JavaScript compiler config file, sometimes required after installing a package that requires extra compiler work (like animation libraries).

Other folders/files include:

  • app.json: This one is specific to Expo projects, it's a configuration file where you define the app name, package name (com.example.test), and other options.
  • App.tsx: The first file that gets called in the React Native application.
  • assets folder: You would place images, icons, and fonts here.

We will focus on the App.tsx file for now, so you don’t need to worry too much about the other files and folders.

Running the App

We will run the app in the Expo Go sandbox application, which can be installed on either iOS (physical device or simulator) or Android (physical device or emulator).

You can run the following command:

yarn start

This will call the internal tooling (Metro bundler) to bundle and serve the application, and Expo Go app will see and connect to the running development server. This is similar to running a NextJS or any other web framework with its development server and then connecting to it.

You can open the app by going to Expo Go and selecting a development server or by hitting i for iOS or a for Android.

Challenge

Try to add a button and display an alert dialog.

Hint: Check out React Native docs for help.

Resources

React Native docs: https://reactnative.dev/docs/getting-started

Expo docs: https://docs.expo.dev/

Expo TypeScript guide: https://docs.expo.dev/guides/typescript/

Expo's app.json: https://docs.expo.dev/versions/latest/config/app/