
<div align='center'>
    <img align="center" src=".github/newscout_text_light.png" height="50">
</div>


----


## Table of Contents
* [Project Setup](#project-setup)
* [Project Description](#project-description)
* [Project Structure](#project-structure)
* [Core APIs](#core-apis)
* [Development](#development)


## Project Setup

### Please refer to the [React Native Documentation](https://reactnative.dev/docs/environment-setup)

#### For Android 

1. Install [Node v18](https://www.liquidweb.com/kb/install-nvm-linux/)
2. Install [Java JDK 17](https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-on-ubuntu-22-04)
3. Install [Android Studio](https://www.educative.io/answers/how-to-install-android-studio-in-ubuntu)
4. Clone Project from GOGS
    ```bash 
    git clone gogs@git.fafadiatech.com:savio/Newscout_Mobile.git
    cd Newscout_Mobile
    ```
5. Check Dependancies by running 
    ```bash 
    npx react-native doctor
    ```
    **NOTE:** Please rectify the issues shown by RN Doctor before running the project.
6. Install NPM Packages
    ```bash 
    npm install
    ```
7. For Debugging, Use an android device or emulator
   1. For Android Device
        1. Follow this guide for 
            [Running on Device](https://reactnative.dev/docs/running-on-device)
   2. For Emulator 
        1. Install [KVM](https://phoenixnap.com/kb/ubuntu-install-kvm)
        2. [Create a Virtual Device with AVD Manager in Android Studio](https://developer.android.com/studio/run/managing-avds)

8. Run Project with 
```bash 
    npx react-native start
```

#### For iOS

TBD

## Project Description

### Main Dependancies

1. [toggle-switch-react-native](https://www.npmjs.com/package/toggle-switch-react-native) : Custom Switch Component for Toggle Scenarios. 
2. [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) : Icon Library for the App
3. [react-native-reanimated-carousel](https://www.npmjs.com/package/react-native-reanimated-carousel) : Requires [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated-v3](https://github.com/kmagiera/react-native-reanimated)
4. [react-native-paper](https://callstack.github.io/react-native-paper/docs/guides/getting-started): Supporting Component Library for the App. 
5. [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient): Allows to create linear gradient for Views.
6. [axios](https://axios-http.com/docs/intro): Handles API Handling Functionality
7. [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator): Provides Bottom Tabs Navigation for the App
8. [@react-navigation/drawer](https://reactnavigation.org/docs/drawer-navigator): Provides Drawer Navigation for the App
9. [@react-navigation/native-stack](https://reactnavigation.org/docs/native-stack-navigator): Provides Platform Specific Stack Navigation for the App
10. [@react-navigation/native](https://reactnavigation.org/docs/getting-started): Contains Driver Code for other Navigation Packages.
11. [@gorhom/bottom-sheet](https://www.npmjs.com/package/@gorhom/bottom-sheet): Provides resizable bottom sheet modal for the App 
12. [react](https://react.dev/): The library for web and native user interfaces.
13. [react-native](https://reactnative.dev/): Cross Platform App Library for creating native apps.

**NOTE:** Please refer the `package.json` file for the versions used for the packages.

## Project Structure

1. Project files are contained in `src` folder. 
2. Project files are divided based on their utility
    1. `api`: Contain URL Constants and API Entity Functions
    2. `assets`: Contain Static Files like images and fonts
    3. `components`: Contain Resuable Components for the Screens. The folder follows [Atomic Development Project Structure](https://medium.com/@prathiba2796/react-native-best-practices-for-organizing-code-with-atomic-folder-structure-131858653eb1).
    4. `constants`: Contain Colors, Fonts and Responsive Scaling Constants 
    5. `utils`: Contain Utility Functions
    6. `context`: Contain App Context Files like Theme and Auth. This helps us aggregate the context data accessible from a single point. 
    7. `navigation`: Contain Logic to navigate across the screens.
    8. `screens`: Contains All Pages for the App. Each File represents a Page for the Application. Pages are segregated by their [features / function](https://www.antit.io/tech-blog/by-feature-approach-scaffolding-react-native)

## Core APIs

Please refer the [`data`](src/api/data.js) for API Functions.

**BASE URL** : http://www.newscout.in

### Trending News

<details>
 <summary><code>GET</code> <code><b>/trending</b></code></summary>

##### Parameters

> | name      |  type     | data type               | description                                                           |
> |-----------|-----------|-------------------------|-----------------------------------------------------------------------|
> | None      |  required | object (JSON or YAML)   | N/A  |


##### Responses

* **`200`** Response (application/json)

```json
{
  "header": {
    "status": "1"
  },
  "body": {
    "results": [
      {
        "id": 2515514,
        "articles": [
          {
            "id": 2075649,
            "title": "Democrat Gabe Amo Becomes Rhode Island's First Black Candidate Elected To Congress",
            "source": "huffpost.com",
            "category": "Uncategorised",
            "hash_tags": [
              "gabe amo",
              "congress",
              "rhode island"
            ],
            "source_url": "https://www.huffpost.com/entry/rhode-island-gabe-amo-elected_n_654ae415e4b0e63c9dc1646b",
            "cover_image": "https://img.huffingtonpost.com/asset/654ae418220000cc11cef254.jpeg?ops=1200_630",
            "blurb": "Democrat Gabe Amo defeated Republican Gerry Leonard to win Rhode Island’s 1st Congressional District seat Tuesday, becoming the state’s first Black candidate elected to Congress....",
            "published_on": "2023-11-08T01:29:50Z",
            "article_media": [],
            "category_id": 123,
            "domain": "newscout",
            "active": true,
            "source_id": 51,
            "article_format": null,
            "author": "",
            "slug": "democrat-gabe-amo-becomes-rhode-islands-first-black-candidate-elected-to-congress-2075649",
            "root_category": "Uncategorised",
            "root_category_id": 123
          },
        
          {
            "id": 2075495,
            "title": "Boat captain found guilty for 2019 California boat tragedy that killed 34",
            "source": "foxnews.com",
            "category": "Uncategorised",
            "hash_tags": [],
            "source_url": "https://www.foxnews.com/us/boat-captain-found-guilty-2019-california-boat-tragedy-killed-34",
            "cover_image": "https://static.foxnews.com/foxnews.com/content/uploads/2023/11/captain-boat-2-1.jpg",
            "blurb": "Fox News Flash top headlines are here. Check out whats clicking on Foxnews.com.",
            "published_on": "2023-11-07T16:39:50Z",
            "article_media": [],
            "category_id": 123,
            "domain": "newscout",
            "active": true,
            "source_id": 24,
            "article_format": null,
            "author": "",
            "slug": "boat-captain-found-guilty-for-2019-california-boat-tragedy-that-killed-34-2075495",
            "root_category": "Uncategorised",
            "root_category_id": 123
          },
          {
            "id": 2075283,
            "title": "Captain found guilty of ‘seaman’s manslaughter’ in boat fire that killed 34 off California coast",
            "source": "washingtontimes.com",
            "category": "China",
            "hash_tags": [
              "b jerry boylan",
              "b law crime",
              "b los angeles"
            ],
            "source_url": "https://www.washingtontimes.com/news/2023/nov/6/jerry-boylan-captain-guilty-seamans-manslaughter-b/?utm_source=RSS_Feed&utm_medium=RSS",
            "cover_image": "https://twt-thumbs.washtimes.com/media/image/2023/11/06/California_Boat_Fire_63868--6d532_c0-145-2930-1854_s1200x700.jpg?a8da2264f2a94c98eb4f636ca322450b5b36eb33",
            "blurb": "LOS ANGELES — A scuba dive boat captain was convicted Monday of criminal negligence in the deaths of 34 people killed in a fire aboard the vessel in 2019, the deadliest maritime disaster in recent U.S. history.....",
            "published_on": "2023-11-07T04:44:57.499413Z",
            "article_media": [],
            "category_id": 134,
            "domain": "newscout",
            "active": true,
            "source_id": 16,
            "article_format": null,
            "author": "",
            "slug": "captain-found-guilty-of-seamans-manslaughter-in-boat-fire-that-killed-34-off-california-coast-2075283",
            "root_category": "Regional Updates",
            "root_category_id": 132
          }
        ],
        "domain": "newscout",
        "created_at": "2023-11-08T09:31:51.661510Z",
        "modified_at": "2023-11-08T09:31:51.697270Z",
        "active": true,
        "score": 0.0
      }
    ]
  }
}

```

</details>


### Articles by Category

<details>
 <summary><code>GET</code> <code><b>/article/search/</b></code></summary>

##### Parameters

> | name      |  type     | data type               | description                                                           |
> |-----------|-----------|-------------------------|-----------------------------------------------------------------------|
> | category      |  optional | string   | N/A  |
> | page | optional | number | N/A|

##### Responses

* **`200`** Response (application/json)

```json
{
  "header": {
    "status": "1"
  },
  "body": {
    "results": [
      {
        "id": 2075412,
        "title": "Jack Smith Opposes Trump’s Efforts To Get Federal Election Interference Case Tossed Out",
        "source": "huffpost.com",
        "category": "Tech",
        "hash_tags": [
          "jack smith",
          "donald trump"
        ],
        "source_url": "https://www.huffpost.com/entry/jack-smith-trump-jan-6-case_n_654a14f0e4b0e63c9dc0cd3b",
        "cover_image": "https://img.huffingtonpost.com/asset/654a236424000055005533f2.jpeg?cache=OJF7V5KFoP&ops=1200_630",
        "blurb": "Breaking News Reporter, HuffPost\nSpecial counsel Jack Smith’s team on Monday forcefully rejected former President Donald Trump’s efforts to get his federal election interference case thrown out in a series of court filings Monday.",
        "published_on": "2023-11-07T13:11:32Z",
        "article_media": [],
        "category_id": 127,
        "domain": "newscout",
        "active": true,
        "source_id": 51,
        "article_format": null,
        "author": "",
        "slug": "jack-smith-opposes-trumps-efforts-to-get-federal-election-interference-case-tossed-out-2075412",
        "root_category": "Sector Updates",
        "root_category_id": 124,
        "article_score": 66.95
      },
      {
        "id": 2075374,
        "title": "Axis Bank inks an MoU with IRMA to promote financial inclusion and literacy",
        "source": "livemint.com",
        "category": "Banking",
        "hash_tags": [
          "axis bank",
          "all you need to know",
          "mintgenie"
        ],
        "source_url": "https://www.livemint.com/money/personal-finance/axis-bank-inks-an-mou-with-irma-to-promote-financial-inclusion-and-literacy-in-india-details-here-11699352032103.html",
        "cover_image": "https://www.livemint.com/lm-img/img/2023/11/07/1600x900/2-0-470760800-axis-bank-0_1680765658586_1699352302423.JPG",
        "blurb": "\nJust a few days ahead of “National Education Day\" observed on November 11 every year, Axis Bank and the Institute of Rural Management Anand (IRMA) have entered into a Memorandum of Understanding (MoU) on November 06, 2023. The idea behind entering the MoU is to establish the Axis Bank Chair for financial inclusion at IRMA. ....",
        "published_on": "2023-11-07T11:28:03Z",
        "article_media": [],
        "category_id": 125,
        "domain": "newscout",
        "active": true,
        "source_id": 49,
        "article_format": null,
        "author": "",
        "slug": "axis-bank-inks-an-mou-with-irma-to-promote-financial-inclusion-and-literacy-2075374",
        "root_category": "Sector Updates",
        "root_category_id": 124,
        "article_score": 78.6
      },
      {
        "id": 2075369,
        "title": "Amazon Sale 2023: Want new display? Get up to 69% off on monitors under  ₹10000",
        "source": "livemint.com",
        "category": "Tech",
        "hash_tags": [],
        "source_url": "https://www.livemint.com/technology/gadgets/amazon-sale-2023-want-new-display-get-up-to-69-off-on-monitors-under-rs-10000-11699334735112.html",
        "cover_image": "https://www.livemint.com/lm-img/img/2023/11/07/1600x900/amazon_sale_1699335717698_1699343218352.jpg",
        "blurb": "As the Amazon Sale of 2023 draws to a close, the opportunity to enhance your workspace with a brand-new monitor under ₹ 10,000 couldn't be more enticing. ...",
        "published_on": "2023-11-07T10:50:06Z",
        "article_media": [],
        "category_id": 127,
        "domain": "newscout",
        "active": true,
        "source_id": 49,
        "article_format": null,
        "author": "",
        "slug": "amazon-sale-2023-want-new-display-get-up-to-69-off-on-monitors-under-10000-2075369",
        "root_category": "Sector Updates",
        "root_category_id": 124,
        "article_score": 66.95
      }
    ],
    "filters": {
      "category": [
        {
          "key": "Automotive Industry",
          "doc_count": 1052
        },
        {
          "key": "Banking",
          "doc_count": 13785
        }
      ],
      "source": [
        {
          "key": "business-standard.com",
          "doc_count": 11865
        },
        {
          "key": "economictimes.indiatimes.com",
          "doc_count": 3889
        }
       
      ],
      "hash_tags": [
        {
          "key": "amazon",
          "doc_count": 2249
        },
        {
          "key": "apple",
          "doc_count": 3698
        }

      ]
    },
    "count": 167432,
    "total_pages": 8372,
    "current_page": 1,
    "next": "http://www.newscout.in/api/v1/article/search/?category=Sector+Updates&domain=newscout&page=2",
    "previous": null
  }
}

```

</details>

### Articles by Search Query

<details>
 <summary><code>GET</code> <code><b>/article/search/</b></code></summary>

##### Parameters

> | name      |  type     | data type               | description                                                           |
> |-----------|-----------|-------------------------|-----------------------------------------------------------------------|
> | category      |  optional | string   | N/A  |
> | page | optional | number | N/A |
> | q | optional | string | N/A |

##### Responses

* **`200`** Response (application/json)

```json
{
  "header": {
    "status": "1"
  },
  "body": {
    "results": [
      {
        "id": 2075766,
        "title": "India, US to review bilateral ties, key global issues at '2+2' dialogue",
        "source": "newindianexpress.com",
        "category": "India",
        "hash_tags": [
          "usa",
          "indo us ties",
          "india",
          "2+2 dialogue"
        ],
        "source_url": "https://www.newindianexpress.com/nation/2023/nov/08/india-us-to-review-bilateral-ties-key-global-issues-at-22-dialogue-2631234.html",
        "cover_image": "https://images.newindianexpress.com/uploads/user/imagelibrary/2023/11/8/w600X390/India_US_Two_Plus_Two.jpg",
        "blurb": "NEW DELHI: India and <em>the</em> US will carry out a comprehensive review of their fast-expanding strategic ties at <em>the</em> next edition of <em>the</em> here on Friday.\nUS Secretary of State Antony Blinken and Defence Secretary Lloyd Austin are visiting India for <em>the</em> dialogue.",
        "published_on": "2023-11-08T10:04:10.930895Z",
        "article_media": [],
        "category_id": 160,
        "domain": "newscout",
        "active": true,
        "source_id": 54,
        "article_format": null,
        "author": "",
        "slug": "india-us-to-review-bilateral-ties-key-global-issues-at-22-dialogue-2075766",
        "root_category": "Regional Updates",
        "root_category_id": 132,
        "article_score": 70.28
      }
    ],
    "filters": {
      "category": [
        {
          "key": "Asia",
          "doc_count": 98997
        },
        {
          "key": "China",
          "doc_count": 34794
        }
      ],
      "source": [
        {
          "key": "business-standard.com",
          "doc_count": 166957
        },
        {
          "key": "financialexpress.com",
          "doc_count": 71065
        }
      ],
      "hash_tags": [
        {
          "key": "",
          "doc_count": 4368
        },
        {
          "key": "apple",
          "doc_count": 4069
        }
      ]
    },
    "count": 1418743,
    "total_pages": 70938,
    "current_page": 1,
    "next": "http://www.newscout.in/api/v1/article/search/?domain=newscout&page=2&q=the",
    "previous": null
  }
}

```

</details>

## Development

### Pre-requisites

* [React Navigation](https://reactnavigation.org/)
* [React Native Paper](https://reactnativepaper.com/)

### Key Components / Screens:

1. [`LandingPageNavigator.jsx`](src/navigation/LandingPageNavigator.jsx): Contains Initial Landing Page and Authentication Workflow Page.
2. [`HomePageNavigator.jsx`](src/navigation/HomePageNavigator.jsx): Provides Navigation for the Post Login Workflow for User 

### Creating a Component/Screen from Scratch

**Recommended:** When using VSCode for development, Please use these VSCode Extensions
* [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) for Debugging 
* [ES7+ React/React Native Snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) for Code Snippets Shortcuts
* [Javascript Docstrings](https://marketplace.visualstudio.com/items?itemName=Massi.javascript-docstrings) for Code Commenting for JS 

**Example:** [News Detail Page](src/screens/News/NewsDetailPage.js)