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
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.
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.
assetsfolder: 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:
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.
Try to add a button and display an alert dialog.
Hint: Check out React Native docs for help.
React Native docs: https://reactnative.dev/docs/getting-started
Expo docs: https://docs.expo.dev/
Expo TypeScript guide: https://docs.expo.dev/guides/typescript/