Starting an Expo App

React Native is a development framework for building cross-platform mobile apps. After starting a new React Native project, various tooling needs to be configured, including ESLint for linting, Prettier for code formatting, TypeScript for type-checking, and Jest and React Native Testing Library for testing. This article will discuss how to set up all of these tools, so you can get right to coding.

Create the app

Two popular ways to build a React Native app are Expo and React Native CLI. To learn more about the differences, check out this blog post.

Let’s build an example project using Expo called “SampleProject” (per the Expo docs)..

> npx create-expo-app -t expo-template-blank-typescript
-> What is your app named? SampleProject

> cd SampleProject
> npx expo start

Voila, you are up and running.

## Add ESLint and Prettier

To add Prettier and ESLint to your Expo app, we will use the package called [eslint-config-universe](https://github.com/expo/expo/tree/main/packages/eslint-config-universe). This package was built by the Expo team to create a seamless way to add Prettier and ESLint to the app.

You can follow this step:

  - Install `eslint, prettier, eslint-config-universe, and other packages to help parse/support to typescript` as dev dependencies:

```bash
yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-universe

Customize Prettier Settings

To customize the Prettier settings, create a .prettierrc file in the root directory of your project:

{
  "singleQuote": true
}

The final step is to add the following to the package.json file:

"scripts": {
  ...
  "fix:prettier": "prettier --config .prettierrc.js --write '**/*.{ts,tsx,js,jsx}'",
  "check:prettier": "prettier --config .prettierrc.js --check '**/*.{ts,tsx,js,jsx}'",
},

• Run yarn check:prettier and yarn fix:prettier to check and fix any problems in your code, respectively.

Read more about additional Prettier configs and options.

Custom ESLint Settings

Create a .eslintrc.js file in the root directory of your project with the following contents:

module.exports = {
  extends: 'universe/native',
};

To customize the ESLint Typescript linting, add the additional settings to your .eslintrc.js:

In the snippet below, we tell ESLint and Typescript where to find the Typescript config.

module.exports = {
  extends: [
    'universe',
+   'universe/shared/typescript-analysis',
  ],
+ overrides: [
+   {
+     files: [
+       '*.ts',
+       '*.tsx',
+       '*.d.ts'
+     ],
+     parserOptions: {
+       project: './tsconfig.json'
+     },
+   },
+ ],
};

The final step is to add the following to the package.json file:

"scripts": {
  ...
  "check:lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  "fix:lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
},

• Run yarn check:lint and yarn fix:lint to check and fix the code, respectively. This command will ensure all the code is formatted according to the configured rules and aligned to the React Native rules.

Following these steps, you should now have Prettier and ESLint set up in your Expo app. This setup will help ensure that your code is correctly formatted and linted according to the React Native rules you have set up. If you need configuration changes, you can do so in the .prettierrc and .eslintrc.js files and re-run yarn lint to update the linting and formatting of your code.

Setup Testing with Jest and React Native Testing Library

To add Jest and the React Native Library to your React Native app, follow this step:

• Install Jest and @testing-library/react-native as dev dependencies:

yarn add -D jest-expo jest @testing-library/react-native @types/jest

Jest is a JavaScript testing framework that will help you write and run tests on your React Native app. @testing-library/react-native is used to make writing tests easier.

• Create a jest.config.js file in the root directory of your project with the following contents:

module.exports = {
  preset: 'jest-expo',
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
  ],
};

This config setup will tell Jest to use the Jest Expo preset. The transformIgnorePatterns configuration excludes specific files from being transformed by Jest.

• Create a __test__/App.spec.tsx file in the root directory of your project with the following contents:

import { render, screen } from '@testing-library/react-native';
import React from 'react';

import App from '../App';

describe('App', () => {
  it('renders the Text', () => {
    render(<App />);
    expect(screen.getByText('Open up App.tsx to start working on your app!')).toBeTruthy();
  });
});

• Add the following to the package.json file:

"scripts": {
  ...
  "test": "jest"
}

• Run yarn test to run the tests and you should see a passing test. Running the tests will help you identify and fix any issues in your code.

Jest is a powerful tool that allows you to test both synchronous and asynchronous code, and it provides a wide range of matchers and utilities to make testing easier. You can use Jest to write unit tests, integration tests, and end-to-end tests for your React Native app, helping to ensure that it is working as expected.

The @testing-library/react-native library provides a set of utilities that make it easy to test React Native components and user interfaces. This library offers a range of functions and methods that allow you to interact with your app’s features and test their behavior. You can use this library to write tests that simulate user interactions, test component rendering and layout, and more.

By combining Jest and the React Native Library, you can write comprehensive tests for your app to ensure it works correctly. This setup will help you catch issues early and secure your app is high quality.