update React Native and its dependencies + RTKQuery (#236)

Author: JeremyDolle

.github/workflows/CI.yml

@@ -8,15 +8,14 @@ on:
     - '*'
 
 jobs:
-  install-lint-test-type:
+  install-lint-test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Install yarn dependencies
         run: |
           cd template
           yarn install
-          yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @types/fbemitter @types/react-redux
       - name: Run linters
         run: |
           cd template
@@ -28,8 +27,3 @@ jobs:
           cd template
           cp src/Config/index.example.js src/Config/index.js
           yarn test
-      - name: Run type check
-        run: |
-          cd template
-          cp plugins/typescript/template/tsconfig.dev.json plugins/typescript/template/tsconfig.json
-          yarn type-check

documentation/docs/3_Guides/3_1_Theme.md

@@ -11,7 +11,7 @@ It helps with variables and reusable classes to create harmony between applicati
 The boilerplate provides a custom hook called `useTheme` and you can use it like the example bellow:
 
 ```jsx
-import { useTheme } from '@/Theme'
+import { useTheme } from '@/Hooks'
 
 const Brand = ({ height = 200, width = 200, mode = 'contain' }) => {
   const {

documentation/docs/3_Guides/3_2_ThemesAndDarkMode.md

@@ -89,15 +89,15 @@ That's it ! now you can use the `ChangeTheme` action to set the theme in a conta
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { View, Button } from 'react-native'
-import { useTheme } from '@/Theme'
-import ChangeTheme from '@/Store/Theme/ChangeTheme'
+import { useTheme } from '@/Hooks'
+import { changeTheme } from '@/Store/Theme'
 
 const IndexExampleContainer = () => {
   const { Common, Fonts, Gutters, Layout } = useTheme()
   const dispatch = useDispatch()
 
   const changeTheme = ({ theme, darkMode }) => {
-    dispatch(ChangeTheme.action({ theme, darkMode }))
+    dispatch(changeTheme({ theme, darkMode }))
   }
 
   return (

documentation/docs/3_Guides/3_3_SplashScreenLoadingData.md

@@ -4,7 +4,7 @@ title: Splash screen & loading data 💾
 ---
 
 In many applications, you need to load data from API before displaying any content.
-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.
+To do that, we built a solid navigation based on a splash screen to load data before the content shows.
 
 ---
 
@@ -25,93 +25,48 @@ const App = () => (
 )
 ```
 
-What is new here is into the `ApplicationNavigator` component :
+Nothing new into the `Navigators/Application` component too :
 
 ```jsx
 const Stack = createStackNavigator()
 
-let MainNavigator
-
 // @refresh reset
 const ApplicationNavigator = () => {
   const { Layout, darkMode, NavigationTheme } = useTheme()
   const { colors } = NavigationTheme
-  const [isApplicationLoaded, setIsApplicationLoaded] = useState(false)
-  const applicationIsLoading = useSelector((state) => state.startup.loading)
-
-  useEffect(() => {
-    if (MainNavigator == null && !applicationIsLoading) {
-      MainNavigator = require('@/Navigators/Main').default
-      setIsApplicationLoaded(true)
-    }
-  }, [applicationIsLoading])
 
   return (
     <SafeAreaView style={[Layout.fill, { backgroundColor: colors.card }]}>
       <NavigationContainer theme={NavigationTheme} ref={navigationRef}>
         <StatusBar barStyle={darkMode ? 'light-content' : 'dark-content'} />
-        <Stack.Navigator headerMode={'none'}>
-          <Stack.Screen name="Startup" component={IndexStartupContainer} />
-          {isApplicationLoaded && (
-            <Stack.Screen
-              name="Main"
-              component={MainNavigator}
-              options={{
-                animationEnabled: false,
-              }}
-            />
-          )}
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+          <Stack.Screen name="Startup" component={StartupContainer} />
+          <Stack.Screen
+            name="Main"
+            component={MainNavigator}
+            options={{
+              animationEnabled: false,
+            }}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaView>
   )
 }
 ```
-
-So the root navigator is a stack with two screens : 
- - the splash screen (`IndexStartupContainer`),
- - a second navigator (`MainNavigator`). 
- 
-The main goal of the `ApplicationNavigator` is to only have one screen (the `IndexStartupContainer`) to load. 
-And, when the application finish loading, then fetch and display the `MainNavigator`.
-In other words, when `ApplicationNavigator` is mounted, it only can display the `IndexStartupContainer` because the `MainNavigator` isn't loaded and imported yet.
-In the `StartupContainer`, the redux action which is used to load data on init application is trigger and when the action is finish, the state `state.startup.initialize.loading` turns `true`.
-when this state is true, in the useEffect the `MainNavigator` navigator is imported , the navigation navigate and reset to a screen of the `MainNavigator`.
-
-To conclude, all new screens have to be added to `MainNavigator`. The `ApplicationNavigator` increase startup performance thanks to inline require and provides a splash screen to load your data.
+It just contains some requirement like the `SafeAreaView` for ios, 
+the `NavigationContainer` bound with a ref to use utils contained in `Navigators/utils` 
 
 ## How to load data before app open ❓
 
-To have a great separation of concerns, all API call are make into Services. In the above section, it said that in `IndexStartupContainer`, a redux action is triggered. This action is `InitializeStartupAction` :
+In `StartupContainer`, the `init` function is where you can crete asynchronous tasks like fetching data 
 
 ```javascript
-useEffect(() => {
-    dispatch(InitStartup.action())
-}, [dispatch])
-```
-
-In redux, triggering an action lead to an associated reducer and in most cases the action pass trough a middleware.
-All the logic can be found at `Stores/Startup/Init.js`. 
-
-```javascript
-import { buildAction, buildReducers } from '@/Store/builder'
-import FetchOne from '@/Store/User/FetchOne'
-
-export default {
-  initialState: { loading: false, error: null },
-  action: buildAction('startup/init', async (args, { dispatch }) => {
-    // Timeout to fake waiting some process
-    // Remove it, or keep it if you want display a beautiful splash screen ;)
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-    // Here we load the user 1 for example, but you can for example load the connected user
-    await dispatch(FetchOne.action(1))
-    await dispatch(DefaultTheme.action({ theme: 'default', darkMode: null }))
-    // Navigate and reset to the main navigator
-    navigateAndSimpleReset('Main')
-  }),
-  reducers: buildReducers({ itemKey: null }), // We do not want to modify some item by default
+const init = async () => {
+  await setDefaultTheme({ theme: 'default', darkMode: null })
+  // Here you can add asynchronous/synchronous tasks
+  navigateAndSimpleReset('Main')
 }
 ```
 
-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).
-So, to load data on splash screen you just have to add dispatched action in the buildAction like `FetchOne` and `DefaultTheme` in the above example. 
+This function is called when the StartupContainer is mounted.