> For the complete documentation index, see [llms.txt](https://listing-nb.gitbook.io/olo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://listing-nb.gitbook.io/olo/customer-app/components.md).

# Components

## Components

* [App](/olo/customer-app/components.md#app)
* [Registration](/olo/customer-app/components.md#registration)
* [MainHome](/olo/customer-app/components.md#mainhome)
* [ProductListing](/olo/customer-app/components.md#productlisting)
* [ProductDescription](/olo/customer-app/components.md#productdescription)
* [SellingForm](/olo/customer-app/components.md#sellingform)
* [UploadingImages](/olo/customer-app/components.md#uploadingimages)
* [MainAdd](/olo/customer-app/components.md#mainadd)
* [MainChat](/olo/customer-app/components.md#mainchat)
* [LiveChat](/olo/customer-app/components.md#livechat)
* [Network](/olo/customer-app/components.md#network)
* [LocationModal](/olo/customer-app/components.md#locationmodal)
* [ReportModal](/olo/customer-app/components.md#reportmodal)

### App

* Location: The UI can be found under `src/App.js` 
* Working: Configures  Fonts and Navigation.
* Result: Everything is configured loads the next view depending on if the fonts are loaded or not. If the fonts are not loaded then Loading screen will show else it will show Main Screen.

### Registration

* Location: The UI can be found under `src/screens/AccountStack/Registration//Registration.js`
* Working: Registers User using Google or Facebook.
* Result:  Shown the login screen if user is not logged. For the time being, `isLogged` variable is used (Hard Coded).

### MainHome

* Location: The UI can be found under `src/screens/HomeStack/MainHome/MainHome.js` Its [query](https://graphql.org/learn/queries/) can be found under `src/apollo/server.js` with constant `categories` & `products`
* Result: Shows categories and products

### ProductListing

* Location: The UI can be found under `src/screens/HomeStack/ProductListing/ProductListing.js` 
* Result: Shows all the product in specific category.

### ProductDescription

* Location: The UI can be found under `src/screens/HomeStack/ProductDescription/ProductDescription.js`  
* Result: Shows the product details including attributes, description, report ad, images and  chat with user.

### SellingForm

* Location: The UI can be found under `src/screens/SellStack//SellingForm/SellingForm.js`
* Result: Contain the from which has to be fill in order to selling or posting ads of products.

### UploadingImages

* Location: The UI can be found under `src/screens/SellStack/UploadingImages/UploadingImages.js` 
* Result: After filling the selling form properly, User has to select or capture the images regarding to products. Which represent the condition of products.

### MainAdd

* Location: The UI can be found under `src/screens/AddStack/MainAdd/MainAdd.js`
* Result: User posting ads are shown here with different status (Live, pending, disable) as well as favourite ads are shown there.

### MainChat

* Location: The UI can be found under `src/screens/ChatStack/MainChat/MainChat.js`
* Result: The user can see the chatting history.

### LiveChat

* Location: The UI can be found under `src/screens/ChatStack/LiveChat/LiveChat.js`
* Result: User can send or receive message from this screen.

### Network

* Location: The UI can be found under `src/screens/AccountStack/Network/Network.js` 
* Results: User can see followers and following users.

### LocationModal

* Location: The UI can be found under `src/Components/Modal/LocationModal/LocationModal.js` 
* Result: This is modal shown the UI of location selection including current and province.

### **ReportModal**

* Location: The UI can be found under `src/Components/Modal/ReportModal/ReportModal.js` 
* Result: This is modal shown the UI of reporting ads with description.