MANO Task App

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

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

yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android	For iOS
`yarn android`	`yarn ios`

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Dependencies

Production

React Native
React Navigation
Format JS
FlashList
- Fast & Performant React Native List
FastImage
- FastImage, performant React Native image component.
React Native MMKV
- The fastest key/value storage for React Native.
React Query
- Powerful asynchronous state management for TS/JS

App Structure

Assets

Fonts
- All the project fonts are stored here
- Distributed to the native side by this command
  - for linking: npx react-native-asset link
  - for unlinking: npx react-native-asset unlink
Images
- All the project images are stored here

Components

ProductItem

A compound component to render the product item inside any list
Currently it contains:
- Image
- Title
- Brand
- Price

Usage:

import { ProductItem } from 'components';
  ...
  <ProductItem item={item} index={index}>
     <ProductItem.Image/>
     <ProductItem.Brand />
     <ProductItem.Title />
     <ProductItem.Price />
  </ProductItem>

Button
Container
List
ManoText
- A special text component that should be used across the app
- It supports all react native text component with some extra props to handle the style as wanted in a design system
Price
- A special text component that should be used to render the price
RowWrapContainer
- Like the name, it's a container that wraps the children in a row and wrap them if they exceed the width of the screen
Separator
- Mainly to be used as ItemSeparatorComponent in a list
Spacer
- Adds a space between the item
- Basically it's a View with a flex: 1

Contexts

ProductContext
- Handle Product Item or Product Page compound components state

Hooks

useGetProductsQuery
- A react query hook to fetch the products
useGetSimilarProducts
- A react hook that consumes useGetProductsQuery to get similar products
- It takes the product as an argument and it returns a list of IProduct

I18n

Here we handle all the translations for the app. We use Format JS to handle the translations. The translations are stored in the locales folder. Not only translation as we use format strings based on locales to format the price and the date.

Navigation

Container
- Handle the navigation container
MainStack

Routes

Mainly for the navigation routes and the navigation types

Screens

Discovery
- List of products screen
- It uses the List component to render the list
- It uses the ProductItem component to render the product item
- It uses the useGetProductsQuery hook to fetch the products
Product
- It takes the product(IProduct) from navigation params and renders the content
- It use the ProductPage view to render the product page
- It uses the useGetSimilarProducts hook to fetch the similar products

Services

AsyncStorage
- Wraps the MMKV to handle the async storage
Logger
- A simple logger from rnx-kit
Query
- Handles react query initialization and configuration
- Handles react query persisting and rehydration using AsyncStorage

Types

Views

ProductPage

A compound component to render the product item inside any list
Currently it contains:
- Carousel
- Title
- Price
- Actions
- Category
- SimilarProducts
- Spacer