Skip to content

Commit b723a5b

Browse files
sharmadevssharmadevs
committed
changes are done 16/09
1 parent 1021fdf commit b723a5b

File tree

15 files changed

+9316
-862
lines changed

15 files changed

+9316
-862
lines changed

‎App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import CrashReporterInstance from 'libs/crash-reporter/CrashReporter';
2222
import AsyncStorage from '@react-native-async-storage/async-storage';
2323
import { Alert } from 'react-native';
2424
import SplashScreen from 'react-native-splash-screen';
25-
import PerfomanceWatcher from 'behaviour/perfomance';
25+
// import PerfomanceWatcher from 'behaviour/perfomance';
2626
import InactivityHandler from 'behaviour/inactivityHandler';
2727
declare const global: { HermesInternal: null | {} };
2828
const App = () => {
@@ -116,7 +116,7 @@ const App = () => {
116116
<InactivityHandler />
117117
<NotificationWatcher />
118118
<LoadingScreen />
119-
<PerfomanceWatcher />
119+
{/* <PerfomanceWatcher /> */}
120120
</NetworkInfo>
121121
</NavigationContainer>
122122
</PersistGate>

‎README.md

+223
Original file line numberDiff line numberDiff line change
@@ -1 +1,224 @@
11
# FOTS
2+
# React Native Template
3+
4+
[![Moove It](https://circleci.com/gh/moove-it/react-native-template.svg?style=svg)](https://app.circleci.com/pipelines/github/moove-it/react-native-template?branch=master)
5+
6+
This project aims to be a strong foundation for react-native applications. It provides a clear and organized structure, core dependencies, and boilerplate to jumpstart development.
7+
8+
## Prerequisites
9+
10+
- [Node.js > 12](https://nodejs.org) and npm (Recommended: Use [nvm](https://github.com/nvm-sh/nvm))
11+
- [Watchman](https://facebook.github.io/watchman)
12+
- [Xcode 12](https://developer.apple.com/xcode)
13+
- [Cocoapods 1.10.1](https://cocoapods.org)
14+
- [JDK > 11](https://www.oracle.com/java/technologies/javase-jdk11-downloads.html)
15+
- [Android Studio and Android SDK](https://developer.android.com/studio)
16+
17+
## Base dependencies
18+
19+
- [axios](https://github.com/axios/axios) for networking.
20+
- [prop-types](https://github.com/facebook/prop-types) to type-check our components exposed properties.
21+
- [react-native-config](https://github.com/luggit/react-native-config) to manage envionments.
22+
- [react-navigation](https://reactnavigation.org/) navigation library.
23+
- [react-native-localization](https://github.com/stefalda/ReactNativeLocalization) for string localization.
24+
- [react-native-mmkv-storage](https://github.com/ammarahm-ed/react-native-mmkv-storage#readme) as storage solution.
25+
- [redux](https://redux.js.org/) for state management.
26+
- [redux-persist](https://github.com/rt2zz/redux-persist) as persistance layer.
27+
- [redux-thunk](https://github.com/gaearon/redux-thunk) to dispatch asynchronous actions.
28+
- [jest](https://facebook.github.io/jest/) and [react-native-testing-library](https://callstack.github.io/react-native-testing-library/) for testing.
29+
30+
## Usage
31+
32+
#### Use Template button
33+
34+
Click the "Use this template" button above the file list, then use the Owner drop-down menu, and select the account you want to own the repository. Creating a repository from a template has the following advantages:
35+
36+
- A repository created from a template starts with a single commit.
37+
- Commits to a repository created from a template do appear in your contribution graph.
38+
- Creating a repository from a template starts a new project quickly.
39+
40+
### Option 1: Using React-Native-Rename
41+
42+
You can start by cloning this repository and using [react-native-rename](https://github.com/junedomingo/react-native-rename). In the current state of this project, it should give you no issues at all, just run the script, delete your node modules and reinstall them and you should be good to go.
43+
44+
Keep in mind that this library can cause trouble if you are renaming a project that uses `Pods` on the iOS side.
45+
46+
After that you should proceed as with any javascript project:
47+
48+
- Go to your project's root folder and run `npm install`.
49+
- If you are using Xcode 12.5 or higher got to /ios and execute `pod install --`repo-update`
50+
- Run `npm run ios` or `npm run android` to start your application!
51+
52+
(Using yarn: `yarn ios` or `yarn android`)
53+
54+
Note: Please read the Setup environments section that is below in this file for more information about the execution scripts.
55+
56+
### Option 2: Copy the structure to your project
57+
58+
If you want to roll on your own and don't want to use this as a template, you can create your project and then copy the `/src` folder (which has all the code of your application) and update your `index.js`.
59+
60+
Keep in mind that if you do this, you'll have to **install and link** all dependencies (as well as adding all the necessary native code for each library that requires it).
61+
62+
## Folder structure
63+
64+
This template follows a very simple project structure:
65+
66+
<!-- - `src`: This folder is the main container of all the code inside your application.
67+
- `actions`: This folder contains all actions that can be dispatched to redux.
68+
- `assets`: Asset folder to store all images, vectors, etc.
69+
- `components`: Folder to store any common component that you use through your app (such as a generic button)
70+
- `constants`: Folder to store any kind of constant that you have.
71+
- `controllers`: Folder to store all your network logic (you should have one controller per resource).
72+
- `localization`: Folder to store the languages files.
73+
- `navigation`: Folder to store the navigators.
74+
- `reducers`: This folder should have all your reducers, and expose the combined result using its `index.js`
75+
- `screens`: Folder that contains all your application screens/features.
76+
- `Screen`: Each screen should be stored inside its folder and inside it a file for its code and a separate one for the styles and tests.
77+
- `Screen.js`
78+
- `Screen.styles.js`
79+
- `Screen.test.js`
80+
- `selectors`: Folder to store your selectors for each reducer.
81+
- `storage`: Folder that contains the application storage logic.
82+
- `store`: Folder to put all redux middlewares and the store.
83+
- `test-utils`: Folder to store tests-related utilities and components.
84+
- `theme`: Folder to store all the styling concerns related to the application theme.
85+
- `App.js`: Main component that starts your whole app.
86+
- `index.js`: Entry point of your application as per React-Native standards. -->
87+
88+
## Splash screen customization
89+
90+
To customize the splash screen (logo and background color) use the CLI provided in the [official docs](https://github.com/zoontek/react-native-bootsplash#assets-generation).
91+
92+
## Setup environments
93+
94+
### Using scripts from console
95+
96+
The template already has scripts to execute the project calling a specific environment defined into the package.json file. Keep in mind that if you are going to create new `envs` you have to define the script to build the project properly.
97+
98+
To define which env you want to use, just keep the structure `yarn [platform]: [environment]`
99+
100+
101+
DEV: `yarn ios` or `yarn android`
102+
103+
STG: `yarn ios:staging` or `yarn android:staging`
104+
105+
PROD: `yarn ios:prod` o `yarn android:prod`
106+
107+
Also, you can use npm following the same rule as before: `npm run ios:staging`
108+
109+
Modify the environment variables files in root folder (`.env.development`, `.env.production` and `.env.staging`)
110+
111+
112+
#### Android
113+
114+
A map associating builds with env files is already defined in `app/build.gradle` you can modify or add environments if needed.
115+
116+
For multiple enviroments to work you would need to change `-keep class [YOUR_PACKAGE_NAME].BuildConfig { *; }` on `proguard-rules.pro` file.
117+
118+
#### iOS
119+
120+
The basic idea in iOS is to have one scheme per environment file, so you can easily alternate between them.
121+
122+
To create a new scheme:
123+
124+
- In the Xcode menu, go to Product > Scheme > Edit Scheme
125+
- Click Duplicate Scheme on the bottom
126+
- Give it a proper name on the top left. For instance: "qa"
127+
- Then edit the newly created scheme to make it use a different env file. From the same "manage scheme" window:
128+
129+
Expand the "Build" tab on the left menu
130+
- Click "Pre-actions", and under the plus sign select "New Run Script Action"
131+
- Where it says "Type a script or drag a script file", type: `echo ".env.qa" > /tmp/envfile` replacing `.env.qa` with your file.
132+
- Also, you will need to select the executable for the new schema:
133+
134+
Expand the "Run" tab on the left menu
135+
- Under the "Executable" dropdown select the ".app" you would like to use for that schema
136+
137+
## Generate production version
138+
139+
These are the steps to generate `.apk`, `.aab` and `.ipa` files
140+
141+
### Android
142+
143+
1. Generate an upload key
144+
2. Setting up gradle variables
145+
3. Go to the android folder
146+
4. Execute `./gradlew assemble[Env][BuildType]`
147+
148+
Note: You have three options to execute the project
149+
`assemble:` Generates an apk that you can share with others.
150+
`install:` When you want to test a release build on a connected device.
151+
`bundle:` When you are uploading the app to the Play Store.
152+
153+
For more info please go to https://reactnative.dev/docs/signed-apk-android
154+
155+
### iOS
156+
157+
1. Go to the Xcode
158+
2. Select the schema
159+
3. Select 'Any iOS device' as target
160+
4. Product -> Archive
161+
162+
For more info please go to https://reactnative.dev/docs/publishing-to-app-store
163+
164+
## Styleguide
165+
166+
For coding styling, we decided to go with ESLint and [React Native community's styleguide](https://github.com/facebook/react-native/tree/master/packages/eslint-config-react-native-community#readme).
167+
168+
# How to use it
169+
170+
The idea of this section is to explain how the template composition is the best and easiest to use when you try to use well-formed, architectures, especially using redux flow.
171+
172+
The template follows a simple and convenient exporting pattern. The folder index exposes the resources, allowing to import all from the same path.
173+
174+
With that in mind, we are going to look at each folder to explain how to use it.
175+
176+
## Components
177+
178+
Components are the basic blocks of a react native application, but since we​​ aim to minimize development complexity, all the components are at the same nesting level.
179+
180+
Another important thing is the use of propTypes to check the kind of data that your components need to work properly. If the component receives some data from others, the type of these props must be defined, and in case you need it the default value of the property too.
181+
182+
### Static resources:
183+
184+
To keep an application scalable and organized, the global static resources that are used in the application have to be created in a specific file.
185+
186+
### We manage three main folders for that:
187+
188+
- Assets: Here you can store all the images and icons that you need through the app. You have as an example the icon ic_home.png, to respond with the different device screen densities just create inside the same folder the image and all the scaled versions that you need. RN only handles x1, x2 and x3 in this case, you have.
189+
190+
- assets
191+
- ic_home
192+
- ic_home.png
193+
- [email protected]
194+
- [email protected]
195+
196+
- Localization: This folder contains all the locale objects that you need to create a multilingual application. Create a file for each locale, inside define an object then maintain the nesting sorted by the screen that contains the text that you need and the text you want to show. As the last step, remember to create a reference inside the Localization.js file and add it to LocalizedStrings.
197+
- Theme: Here you can define all the styles that you use on different screens. To make easier the interaction of the application with device options for example you can create here assets as light and dark color palette
198+
199+
## Redux
200+
201+
Once the components are defined, they are tied to the management of information through the application. For this, Redux is implemented with the store-reducer-action structure as usual, however, not only the data is handled through the actions but the success and error responses are also defined by the same form.
202+
203+
### Controllers folder and API connection handler
204+
205+
To keep the networking layer simple, the template uses a single Axios instance in the `httpClient.js`. It uses interceptors to define common side effects for the responses.
206+
207+
When you need communication with a service you have to create a function to manage the operation and grouping according to the kind of transaction inside a controller file, please keep all of those inside the controllers' folder.
208+
209+
While the data transfer between the API and the app is working you must use the success and error actions that help you to catch the result of the operation. With this method, you can track the interaction through the redux store. This is useful because you can create behaviors based on those states in a quick and simple way
210+
211+
### Redux folders
212+
213+
4 folders divide the redux work
214+
215+
- Store: Here you define the store shape and you can configure the persistReducer and middlewares.
216+
- Actions: Remember to create the file and the corresponding test for each action classification. Here you define actions for success and error scenarios.
217+
- Reducers: You have the error and success reducers by default. Create the other classifications and try to keep simple each file. Here you modify the store.
218+
- Selectors: Create one file for each action classification. Here you define what part of the store you need to see in your interface.
219+
220+
## Screens
221+
222+
In this folder, you have the main objects to apply the composition architecture. Just create a folder for each screen you have in your application, call all the components and static resources you need to render the scene and finally use the corresponding hooks to interact with redux and create behaviors depending on the store.
223+
224+
To keep the structure, extract the styles from the main file and place it in a {namefile.styles.js} do the same for the set of tests needed for each screen with the file {namefile.test.js}

‎android/app/build.gradle

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
apply plugin: "com.android.application"
22
apply plugin: 'com.google.gms.google-services'
33
apply plugin: 'com.google.firebase.crashlytics'
4-
apply plugin: 'com.google.firebase.firebase-perf'
54
import com.android.build.OutputFile
65
def useIntlJsc = false
76
/**
@@ -209,7 +208,7 @@ dependencies {
209208
implementation fileTree(dir: "libs", include: ["*.jar"])
210209
//noinspection GradleDynamicVersion
211210
implementation "com.facebook.react:react-native:+" // From node_modules
212-
implementation platform('com.google.firebase:firebase-bom:28.0.1')
211+
implementation platform('com.google.firebase:firebase-bom:28.0.1')
213212
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
214213
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
215214
exclude group:'com.facebook.fbjni'

0 commit comments

Comments
 (0)