Skip to content

Commit 6ef0911

Browse files
JeremyDolleJeremyDolle
committed
update documentation
1 parent 3882e4b commit 6ef0911

File tree

6 files changed

+115
-261
lines changed

6 files changed

+115
-261
lines changed

‎documentation/docs/2_Getting Started/2_1_Installation.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,16 @@ To create a new project using the boilerplate simply run :
2020
npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate
2121
```
2222

23+
:::warning
24+
If you have an error ECACCES this is not bloking, you can use it even if you have this error.
25+
:::
26+
2327
## Running the project
2428

2529
Assuming you have all the requirements installed, you can setup and run the project by running:
2630

2731
- `yarn install` to install the dependencies
28-
- create your [configuration file `App/Config/index.js`](https://github.com/thecodingmachine/react-native-boilerplate/tree/master/template/src/Config) from `index.dev.js` (if you are in dev environment) and fill the missing values
32+
- create your [configuration file `src/Config/index.js`](https://github.com/thecodingmachine/react-native-boilerplate/tree/master/template/src/Config) from `index.dev.js` (if you are in dev environment) and fill the missing values
2933
- run the following steps for your platform
3034

3135
### Android

‎documentation/docs/2_Getting Started/2_2_Configuration.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
slug: /Configuration
3+
title: Configuration
4+
---
5+
6+
## Change the appicon
7+
To help generate appicons, you can use an online tool like [appicon](https://appicon.co/) to generate for both iOS and Android all icons and image sets.
8+
9+
### iOS
10+
To change the appicon of the iOS application, you need to replace all the content of
11+
```
12+
src > ios > *name_of_your_app* > Images.xcassets > AppIcon.appiconset
13+
```
14+
with your appicons generated with [appicon](https://appicon.co/) for example.
15+
16+
### Android
17+
To change the appicon of the Android application, you need to replace all the content of
18+
```
19+
src > android > app > src > res
20+
```
21+
with your appicons generated with [appicon](https://appicon.co/) for example.
22+
23+
---
24+
25+
## Change the splash screen icon
26+
27+
### iOS
28+
You can use the same tool ([appicon](https://appicon.co/)) to generate image sets (@1x, @2x, @3x).
29+
Then you just have to replace : `[email protected]`, `[email protected]`, `[email protected]` with yours in :
30+
```
31+
src > ios > *name_of_your_app* > Images.xcassets > SplashIcon.imageset
32+
```
33+
34+
### Android
35+
You just have to replace the splash_icon.png located at :
36+
```
37+
src > android > app > src > res > drawable
38+
```

‎documentation/docs/3_Guides/3_2_SplashScreenLoadingData.md

Lines changed: 16 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ slug: /SplashScreenLoadingData
33
title: Splash screen & loading data
44
---
55

6-
🚧 It's a Work In Progress section 🚧
7-
86
In many applications, you need to load data from API before displaying any content.
97
To do that, we built a solid navigation based on a splash screen to load data before the content shows, and [inline require](https://reactnative.dev/docs/ram-bundles-inline-requires#inline-requires) to improve performance.
108

9+
---
10+
1111
## How the navigation is build ❓
1212
The answer is :
1313

@@ -41,9 +41,7 @@ let MainNavigator
4141
const ApplicationNavigator = () => {
4242
const [isApplicationLoaded, setIsApplicationLoaded] = useState(false)
4343

44-
const applicationIsLoading = useSelector(
45-
(state) => state.startup.initialize.loading,
46-
)
44+
const applicationIsLoading = useSelector((state) => state.startup.loading)
4745

4846
useEffect(() => {
4947
if (MainNavigator == null && !applicationIsLoading) {
@@ -81,64 +79,26 @@ To have a great separation of concerns, all API call are make into Services. In
8179

8280
```javascript
8381
useEffect(() => {
84-
dispatch(InitializeStartupAction())
82+
dispatch(InitStartup.action())
8583
}, [dispatch])
8684
```
8785

8886
In redux, triggering an action lead to an associated reducer and in most cases the action pass trough a middleware.
89-
All the logic can be found at `Stores/Startup/Initialize.js`.
87+
All the logic can be found at `Stores/Startup/Init.js`.
9088

9189
```javascript
92-
import { createSlice } from '@reduxjs/toolkit'
9390
import { buildAction, buildReducers } from '@/Store/builder'
94-
import initializeStartupService from '@/Services/User/FetchOne'
95-
96-
const name = 'startup'
97-
98-
const initialState = {
99-
loading: true,
100-
error: false,
101-
}
102-
103-
export const InitializeStartupAction = buildAction(
104-
name,
105-
initializeStartupService,
106-
)
107-
108-
const { pending, fulfilled, rejected } = buildReducers(initialState, {
109-
itemKey: null,
110-
})
111-
112-
const initialize = createSlice({
113-
name,
114-
initialState,
115-
extraReducers: (builder) => {
116-
builder
117-
.addCase(InitializeStartupAction.pending, pending)
118-
.addCase(InitializeStartupAction.fulfilled, fulfilled)
119-
.addCase(InitializeStartupAction.rejected, rejected)
120-
},
121-
})
122-
export default initialize.reducer
123-
```
124-
125-
All stores are based on redux-toolkit to simplify the process of API calls by using the `createAsyncThunk` function (hidden by the `buildAction` action which is a store builder function)
126-
So when the action pass through the middleware thunk, the service `initializeStartupService` is launched.
127-
128-
```javascript
129-
export default async () => {
130-
//Simulation of an async function delay
131-
return new Promise((resolve) => {
132-
setTimeout(() => resolve(), 3000)
133-
})
91+
import FetchOne from '@/Store/User/FetchOne'
92+
93+
export default {
94+
initialState: { loading: false, error: null },
95+
action: buildAction('startup/init', async (args, { dispatch }) => {
96+
// Here we load the user 1 for example, but you can for example load the connected user
97+
await dispatch(FetchOne.action(1))
98+
}),
99+
reducers: buildReducers({ itemKey: null }), // We do not want to modify some item by default
134100
}
135101
```
136102

137-
So you can replace the fake call simulated with the Promise by real api calls like this:
138-
139-
```javascript
140-
export default async () => {
141-
const response = await api.get(`users/${userId}`)
142-
return response.data
143-
}
144-
```
103+
All stores are based on redux-toolkit to simplify the process of API calls by using the `createAsyncThunk` function (hidden by the `buildAction` action which is a store builder function).
104+
So, to load data on splash screen you just have to add dispatched action in the buildAction.

‎documentation/docs/3_Guides/3_3_AddAStore.md

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,57 @@ slug: /AddAStore
33
title: Add a store
44
---
55

6-
🚧 It's a Work In Progress section 🚧
6+
🚧 It's a Work In Progress section 🚧
7+
8+
## The Architecture
9+
The root file include the configuration of redux. The two important const are `reducers` and `persistConfig`
10+
11+
```javascript
12+
const reducers = combineReducers({
13+
startup,
14+
user,
15+
})
16+
17+
const persistConfig = {
18+
key: 'root',
19+
storage: AsyncStorage,
20+
whitelist: [],
21+
}
22+
```
23+
24+
`whitelist` in presistConfig could includes store to persist
25+
26+
`reducers` should includes all modules
27+
28+
## Modules
29+
30+
A module is a group of action, state and reducers for a same domain. For example, in the boilerplate there are two modules : `Startup` and `User`
31+
in each module there is a `index.js` file which combines each store feature (`fetchOne.js` for the User modules) . We decide to separate each features in one file in order to avoid very big incomprehensible files.
32+
So each feature includes its scoped state, actions and related reducers.
33+
34+
```javascript
35+
export default {
36+
initialState: {
37+
// Optionally, you can scope variables
38+
fetchOne: { loading: false, error: null },
39+
},
40+
action: buildAction('user/fetchOne', fetchOneUserService),
41+
reducers: buildReducers({
42+
errorKey: 'fetchOne.error', // Optionally, if you scoped variables, you can use a key with dot notation
43+
loadingKey: 'fetchOne.loading',
44+
}),
45+
}
46+
```
47+
48+
In the root file, all features are merge in a slice where states, actions, and reducers are merged and place in a module.
49+
50+
```javascript
51+
const moduleInitialState = {
52+
item: {},
53+
}
54+
55+
export default buildSlice('user', [FetchOne], moduleInitialState).reducer
56+
```
57+
58+
## Redux-toolkit-wrapper
59+
🚧 It's a Work In Progress section 🚧

‎documentation/docs/3_Guides/3_4_AddALangTranslation.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ title: Add a lang translation
66
The boilerplate includes an i18n feature to store and translate String data.
77
The package used is [i18next](https://www.i18next.com/) you can use their documentation for not included functionnalities.
88

9+
---
10+
911
## Add a new language
1012
All languages files are located in `src/Translations/resources`. By default, there is the `en.js` file.
1113
To add a new language just `cp en.js fr.js` and export it in : `src/Translations/resources/index`

0 commit comments

Comments
 (0)