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# make sure you have started the packager before
yarn start
# in another tab, run the application
# for iOS
yarn ios
# for android
yarn androidAndroid:
iOS:
- react-native cli with
typescriptfor 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
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
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.
This is where your stories will be registered and where the Storybook configs will live.
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
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:iosAndroid:
yarn build:e2e:android
yarn test:e2e:androidYou'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.