Welcome to TaskListApp!

Setup instructions

First make sure you have setup react native environment as given here

Clone the repo and install dependencies

 git clone git@github.com:preetb123/TaskListApp.git
 cd TaskListApp
 yarn install

 npx pod-install

To run the app on simulator(iOS)/emulator(android)

# make sure you have started the packager before
yarn start
# in another tab, run the application
# for iOS
yarn ios

# for android
yarn android

Android:

iOS:

Frameworks and libraries used

• react-native cli with typescript for setting up the app
• firebase for authentication and storing tasks
• mobx-state-tree for client side state management
• react-query to facilitate communication with firebase
• restyle for app-wide theming and building custom components lib
• react-navigation for managing navigation
• react-hook-form for form management with zod for validation
• react-native-toast-message for displaying toasts
• storybook for isolated component development
• moti for animations, this lib is built on top of Reanimated 2
• react-native-bootsplash for splashscreen

All icons used are SVGs

Quick Start

App strcture is as below:

TaskListApp
├── src
│   ├── components
│   ├── utils
│   ├── models
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── app.tsx
├── storybook
│   ├── views
│   ├── index.tsx
│   ├── addons.ts
│   ├── rn-addons.ts
│   ├── toggle-storybook.tsx
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.js
├── ios
│   ├── TaskListApp
│   ├── TaskListApp.xcodeproj
│   └── TaskListAppTests
├── e2e
│   ├── config.json
│   ├── environment.ts
│   ├── login-flow.e2e.ts
│   ├── create-task-flow.e2e.ts
│   ├── logout-flow.e2e.ts
│   ├── search-update-task-flow.e2e.ts
├── .env
└── package.json

./src directory

hosts most of the source of the app

components This is where your React components will live. Each component will have a directory containing the .tsx file, along with a story file.

models This is where your app's models will live. Each model has a directory which will contain the mobx-state-tree model file, test file, and any other supporting files like actions, types, etc.

navigation This is where your react-navigation navigators will live.

screens This is where your screen components will live. A screen is a React component which will take up the entire screen and be part of the navigation hierarchy. Each screen will have a directory containing the .tsx file, along with any assets or other helper files.

services Any services that interface with the outside world will live here (think REST APIs, talking to firebase, etc.).

theme Here lives the theme for your application, including spacing, colors, and typography. We use restyle for theming.

utils This has storage related modules

app.tsx This is the entry point to your app. This is where you will find the main App component which renders the rest of the application.

./storybook directory

This is where your stories will be registered and where the Storybook configs will live.

Running Storybook

From the command line in your generated app's root directory, enter yarn run storybook This starts up the storybook server and opens a story navigator in your browser. With your app running, choose Toggle Storybook from the developer menu to switch to Storybook

Running e2e tests

Make sure you follow all instructions care fully as give here

We first need to build the app to run tests on

iOS:

yarn build:e2e:ios
yarn test:e2e:ios

Android:

yarn build:e2e:android
yarn test:e2e:android

You'll get below output once all tests pass

% yarn test:e2e:ios
yarn run v1.22.10
$ detox test -c ios
 PASS  e2e/logout-flow.e2e.ts (17.318 s)
  logout flow
    ✓ should logout the user and navigate to login screen (5106 ms)

 PASS  e2e/login-flow.e2e.ts (12.299 s)
  Login flow
    ✓ should have login screen (1042 ms)
    ✓ should navigate to task list screen on successful login (7190 ms)

 PASS  e2e/search-update-task-flow.e2e.ts (17.429 s)
  search and update task status
    ✓ search and update a task status (6722 ms)

 PASS  e2e/create-task-flow.e2e.ts (17.874 s)
  Create task flow
    ✓ should create a task (7570 ms)

✨  Done in 66.40s.