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