add clean architechture(#master)

App.tsx

@@ -1,118 +1,8 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
 import React from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
 
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
+import Photo from 'presentation/features/photo';
 
 function App(): JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
+  return <Photo />;
 }
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
 export default App;

README.md

@@ -1,79 +1,74 @@
-This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+## 🚀 Project using Clean Architecture recommend by Google Developer
+This guide encompasses best practices and recommended architecture for building robust, high-quality apps
+- [Guide to app architecture (Gooogle Developers)](https://developer.android.com/topic/architecture?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-architecture%3Fhl%3Dvi%23article-https%3A%2F%2Fdeveloper.android.com%2Ftopic%2Farchitecture)
+## Introduction
+This sample demonstrates how one can
 
-# Getting Started
+- Setup base architecture of React Native app using Clean Architecture
+- Use dependency injection for layers separation
+- Make api calls using Axios plugin.
 
->**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/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:
-
-```bash
-# using npm
-npm start
-
-# OR using Yarn
-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
-
-```bash
-# using npm
-npm run android
-
-# OR using Yarn
-yarn android
 ```
-
-### For iOS
-
-```bash
-# using npm
-npm run ios
-
-# OR using Yarn
-yarn ios
+├── common
+|   └── helper
+├── data
+|   ├── config
+|   ├── datasources
+|   ├── gateway
+|   ├── helper
+|   └── repositories
+├── di (dependency injection)
+├── domain 
+|   ├── repositories
+|   └── usecases
+└── presentation
+    ├── assests
+    ├── components
+    ├── contants
+    ├── features
+    ├── localizations
+    ├── navigations
+    └── utils
 ```
 
-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.
-
-## Step 3: Modifying your App
+#### Dependencies
+- [Axios](https://github.com/axios/axios) : http client
+- [Styled-components](https://github.com/styled-components/styled-components) : styled-components
+- [Inversify](https://github.com/inversify/InversifyJS) : dependency injection
 
-Now that you have successfully run the app, let's modify it.
+# Module Structure
 
-1. Open `App.tsx` in your text editor of choice and edit some lines.
-2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+<p align="center">
+  <img src="https://camo.githubusercontent.com/a5485a38e6af7aa1055807a47e1833fc9a35eb7b997940b26936dcffae760623/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f6d61782f3737322f302a73664344456235373157442d374566502e6a7067" />
+</p>
 
-   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+There are 3 main modules to help separate the code. They are Data, Domain, and Presentaion.
 
-## Congratulations! :tada:
+- **Data** contains Local Storage, APIs, Data objects (Request/Response object, DB objects), and the repository implementation.
 
-You've successfully run and modified your React Native App. :partying_face:
+- **Domain** contains UseCases, Domain Objects/Models, and Repository Interfaces
 
-### Now what?
+- **Presentaion** contains UI, View Objects, Widgets, etc. Can be split into separate modules itself if needed. For example, we could have a module called Device handling things like camera, location, etc.
 
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
-- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
 
-# Troubleshooting
+# Package structure
+- Using modular architecture to architect the app per feature to be easier and more readable and isolate the feature from each other
 
-If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+# Repository
+- Bridge between Data layer and Domain layer
+- Connects to data sources and returns mapped data
+- Data sources include DB and Api
 
-# Learn More
+# UseCase
+- Responsible for connecting to repository to retrieve necessary data. returns a Stream that will emit each update.
+- This is where the business logic takes place.
+- Returns data downstream.
+- Single use.
+- Lives in Domain (No Platform dependencies. Very testable).
 
-To learn more about React Native, take a look at the following resources:
+# Presentation (Holder)
+- Organizes data and holds View state.
+- Talks to use cases.
 
-- [React Native Website](https://reactnative.dev) - learn more about React Native.
-- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
-- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
-- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
-- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
+# Presentation (View)
+- View,updates UI

app/common/helper/APIHelper.ts

@@ -0,0 +1,55 @@
+import {Method} from 'axios';
+
+export type NetError = {
+  status: 200;
+  message: '';
+  code: 0;
+};
+
+export type ApiSuccessType<D> = {
+  status: 'success';
+  result: ApiResultType<D>;
+};
+
+type ApiSuccessListType<D> = {
+  status: 'success';
+  result: ApiResultListType<D>;
+};
+
+export type ApiFailureType = {
+  status: 'failed';
+  errors: ErrorType[] | ErrorType;
+  statusCode: number;
+};
+
+type StandardApiResult = {
+  currentPage: number;
+  totalPages: number;
+  perPage: number;
+  totalEntries: number;
+};
+
+export type ApiResultType<D> = StandardApiResult & {
+  data: D;
+};
+
+type ApiResultListType<D> = StandardApiResult & {
+  data: D;
+};
+
+export type ErrorType = {
+  code: string;
+  message: string;
+};
+
+export type ApiReqType = {
+  path: string;
+  method: Method;
+  params?: any;
+  body?: any;
+  headers?: any;
+};
+
+export type ApiShowResType<D> = ApiSuccessType<D> | ApiFailureType;
+export type ApiListResType<D> = ApiSuccessListType<D> | ApiFailureType;
+export type ApiResType<D> = ApiShowResType<D>; // | ApiListResType<D>;

app/data/config/Config.ts

@@ -0,0 +1,23 @@
+export interface AppConfig {
+  endpoint?: string;
+}
+
+const Environment = {
+  Dev: 'Dev',
+  Production: 'Production',
+};
+
+const getConfig = (env: string): AppConfig => {
+  switch (env) {
+    case Environment.Production:
+    case Environment.Dev:
+    default:
+      return {
+        endpoint: 'https://pixabay.com/api/',
+      };
+  }
+};
+
+export const getAppConfig = (): AppConfig => {
+  return getConfig(Environment.Production);
+};

app/data/datasources/photo/PhotoRemoteDataSource.ts

@@ -0,0 +1,19 @@
+import {ApiResType} from 'common/helper/APIHelper';
+import RestApiGateway from 'data/gateway/RestApiGateway';
+import {container, TYPES} from 'di';
+import {injectable} from 'inversify';
+
+export interface PhotoRemoteDataSource {
+  getPhoto(): Promise<ApiResType<any>>;
+}
+
+@injectable()
+export class PhotoRemoteDataSourceImpl implements PhotoRemoteDataSource {
+  async getPhoto(): Promise<ApiResType<any>> {
+    const api = container.get<RestApiGateway>(TYPES.RestApiGateway);
+    return await api.request({
+      path: '?key=10378494-67ad2479ecf48567970bc1f0e&page=1&per_page=6',
+      method: 'GET',
+    });
+  }
+}