Setting Up Expo React Native App: A Step-by-Step Guide

Introduction:

Are you ready to dive into building your Expo React Native app? In this guide, we’ll walk through the steps required to set up your project and troubleshoot common errors. Let’s get started!

Prerequisites:

Before getting started, make sure you have the following tools installed:

• Node.js and npm (Node Package Manager)
• Expo CLI

Step 1: Install Expo CLI

First, make sure you have Expo CLI installed globally on your machine. Open your terminal and run the following command:

npm install -g expo-cli

This will install Expo CLI, which is necessary for creating and managing your Expo projects.

Step 2: Create a new Expo project

Navigate to your desired root folder in the terminal and run the following command:

npx expo init .

When prompted, choose the “blank” template and select TypeScript as the language. This will create a new Expo project with the necessary configuration files.

Step 3: Install dependencies

Next, install the required dependencies for your project. Run the following commands in your project’s root folder:

npm install
npm install --save-dev jest jest-expo @testing-library/react-native
npm install --save-dev @types/testing-library__react-native

These commands will install Jest, the jest-expo preset, and the testing library for React Native, along with the necessary TypeScript type declarations.

Step 4: Configure the tsconfig.json file

To ensure TypeScript is configured correctly, create or update the tsconfig.json file in your project’s root folder with the following content:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "es2017"
  },
  "exclude": ["node_modules"],
  "extends": "expo/tsconfig.base"
}

This configuration ensures TypeScript is set up correctly for your Expo React Native app.

Step 5: Install additional TypeScript dependencies

Run the following command to install additional TypeScript dependencies:

npm install --save-dev typescript @types/react @types/react-native @types/expo

This command installs TypeScript along with the necessary type declarations for React, React Native, and Expo.

Step 6: Install Jest dependencies

To set up Jest for testing, run the following command:

npm install --save-dev jest @types/jest ts-jest react-test-renderer

This command installs Jest, TypeScript support for Jest, and the necessary renderer for testing React components.

Step 7: Configure the jest.config.js file

Create a new jest.config.js file in the root directory of your project and add the following content:

module.exports = {
  preset: "jest-expo",
  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
  transform: {
    "^.+\\.(js|ts|tsx)$": "babel-jest",
  },
  moduleNameMapper: {
    "\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
  },
};

This configuration sets up Jest with the “jest-expo” preset and extends the expectations with the testing library for React Native. It also configures Babel for transforming JavaScript and TypeScript files during testing.

Step 8: Create the mocks/fileMock.js file

Create a new file named fileMock.js inside the mocks folder in your project’s root directory. Add the following content:

module.exports = "test-file-stub";

This mock file is used to handle imports of image files during testing.

Step 9: Create a sample test file

Create a new file named App.test.tsx inside the tests folder in your project’s root directory. Add the following content:

import { render } from "@testing-library/react-native";
import React from "react";
import App from "../../App";

describe("App", () => {
  it("renders correctly", () => {
    const { getByText } = render(<App />);
    const welcomeText = getByText(
      "Open up App.tsx to start working on your app!"
    );
    expect(welcomeText).toBeTruthy();
  });
});

This sample test file uses the testing library for React Native to verify that the App component renders correctly.

Step 10: Update the package.json file

Update the scripts section in your package.json file to include the following:

"scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "web": "expo start --web",
  "test": "jest --watch"
},

These scripts allow you to start your app, run it on Android or iOS, run it in the web browser, and run your tests respectively.

Step 11: Run the app

Finally, you can start your Expo app by running the following command:

npm start

This will start the development server and open the Expo developer tools. From there, you can run your app on various platforms using the provided

Conclusion:

Hopefully, I have been able to help you achieve your aim, share with a friend who could benefit and give me a like and subscribe to help me help more. As the saying goes “what good is knowledge if not shared?
Let’s connect on Facebook, Instagram, Twitter and Youtube as @CodeGenitor