This is a simple React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note: Make sure to have complete the React Native Set Up Your Environment guide before proceeding.

Step 1: Start Metro

First, run Metro, the JavaScript build tool for React Native.

To start the Metro dev server, run the following command from the root of the React Native project:

# Using npm
npm start

# OR using Yarn
yarn start

Step 2: Build and run the app

With Metro running, open a new terminal window/pane from the root of the React Native project, and use one of the following commands to build and run for Android or iOS:

Android

npm run android

iOS

For iOS, remember to install CocoaPods dependencies.

First, run the Ruby bundler to install CocoaPods itself:

bundle install

Then, run:

bundle exec pod install

Note: For more information, please visit CocoaPods Getting Started guide.

Now you can run the app using:

npm run ios

If everything is set up correctly, you should see the app running in the Android Emulator, iOS Simulator, or your connected device.

Testing

Use the following command to run tests.

npm test

Note: Make sure to install dependencies with npm install if you haven't done so.

Packages and Architecture

Packages

• Routing:
  • React Navigation
• State Management:
  • Zustand is used for "global" state
  • Async Storage is used (with zustand's persist middleware) to preserve state accross sessions.
  • TanStack Query is used for managing/caching fetch requests.
• Styling:
  • Uniwind provides TailwindCSS bindings for React Native
  • TailwindCSS via uniwind
  • React Native SVG for React Native SVG support
  • Some Storybookjs Icons are reproduced in this project
• Validation:
  • Valibot is used for validating API returns
• Testing:
  • Jest
  • React Native Testing Library
  • msw for mocking network requests

Architecture/Folder Structure

• index.js/Root.tsx: Entry Point
• __mocks__/: test mocks
• test-utils/: Utilities for testing and setup files.
  • setup.ts/setupEnv.ts: setup and mocks.
• src/: App code
  • screens/: The app's routes
  • icons/: Icons used in the app
  • config/: shared constants
  • queries/: queries for the app (using fetch and tanstack query)
  • stores/: stores for the app (using zustand)
  • util/: utility functions
• **/__tests__/: Test files are co-located with the code they test in __tests__ folders.