React Native Log in

Features

• Persisted log in and log out.
• Typescript code and testing.
• State management with Redux Toolkit.
• HTTP client with error interceptor with axios.
• Screen navigation with React Navigation.
• Redux Reducers and Async Action unit testing with Jest.
• E2E testing with Detox.

Set up

1. React Native CLI
2. npm install

Starting the application

1. Start Metro: npm start
2. In other terminal depending the desired platform execute:

• iOS: npm run ios
• Android: npm run android

Testing

Demo

Unit Testing

E2E testing iOS

E2E testing Android

Set up

npm install detox --save-dev

Runing the tests

Unit Testing

npm test

E2E testing iOS

1. Start Metro: npm run test:start
2. Open other terminal and execute:

build:e2e:ios
test:e2e:ios

E2E testing Android

1. Start Metro: npm run test:start
2. Open other terminal and execute:

build:e2e:android
test:e2e:android

More information

Folder structure

react-app-login
├── app
│   ├── App.tsx
│   ├── models
│   ├── redux
│   ├── screens
│   ├── services
├── ___tests___
├── e2e
├── jest
├── demo
├── android
├── ios
├── index.js
└── package.json

app directory

App.tsx The main App component.

models This is where the app models are stored.

redux Directory with Redux slices and Redux configuration.

screens This is where the screens components are stored.

services Here are the API services and the HTTP configuration.

__tests__ directory

This is where the components tests are saved.

e2e directory

Here are the end to end testing files.

jest directory

This is were jest configurations are stored.

Available Scripts

test

Runs the app unit tests with Jest.

test:start

Starts metro replacing the '.ts' files with '.e2e.ts' files for Detox file mocking.

build:e2e:android

Builds the Detox Android project.

build:e2e:ios

Builds the Detox iOS project.

test:e2e:android

Runs the Detox tests in android emulator.

test:e2e:ios

Runs the iOS tests in iOS simulator.