using navigation ref to navigate without the navigation prop (#136)

* using navigation ref to navigate without the navigation prop
* redux flipper inline require and use push instead of contact
* navigate without navigation prop version

Author: AurelGit

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecodingmachine/react-native-boilerplate",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "TheCodingMachine React Native Boilerplate",
   "repository": {
     "type": "git",

Diff for: template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boilerplate",
-  "version": "2.0.0",
+  "version": "2.1.4",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -29,7 +29,7 @@
     "react-native-screens": "^2.14.0",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
-    "redux-flipper": "^1.4.0",
+    "redux-flipper": "^1.4.2",
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {

Diff for: template/src/App.js

@@ -6,6 +6,7 @@ import { store, persistor } from '@/Store'
 import { SafeAreaView, StatusBar } from 'react-native'
 import { NavigationContainer } from '@react-navigation/native'
 import { ApplicationNavigator } from '@/Navigators'
+import { navigationRef } from '@/Navigators/Root'
 import { Layout } from '@/Theme'
 import './Translations'
 
@@ -20,7 +21,7 @@ const App = () => (
      */}
     <PersistGate loading={null} persistor={persistor}>
       <SafeAreaView style={Layout.fill}>
-        <NavigationContainer>
+        <NavigationContainer ref={navigationRef}>
           <StatusBar barStyle="dark-content" />
           <ApplicationNavigator />
         </NavigationContainer>

Diff for: template/src/Containers/Startup/Index.js

@@ -1,41 +1,25 @@
 import React, { useEffect } from 'react'
-import { ActivityIndicator, View, Button, Text } from 'react-native'
-import { Layout, Fonts } from '@/Theme'
-import { useDispatch, useSelector } from 'react-redux'
+import { ActivityIndicator, View, Text } from 'react-native'
+import { Layout, Fonts, Gutters } from '@/Theme'
+import { useDispatch } from 'react-redux'
 import InitStartup from '@/Store/Startup/Init'
-import { CommonActions } from '@react-navigation/native'
 import { useTranslation } from 'react-i18next'
+import { Brand } from '@/Components'
 
 const IndexStartupContainer = ({ navigation }) => {
   const { t } = useTranslation()
 
   const dispatch = useDispatch()
-  const isApplicationLoading = useSelector((state) => state.startup.loading)
 
   useEffect(() => {
     dispatch(InitStartup.action())
   }, [dispatch])
 
   return (
-    <View style={[Layout.fill, Layout.rowCenter]}>
-      {isApplicationLoading ? (
-        <ActivityIndicator />
-      ) : (
-        <View>
-          <Text style={Fonts.textCenter}>{t('welcome')}</Text>
-          <Button
-            title={t('actions.continue')}
-            onPress={() =>
-              navigation.dispatch(
-                CommonActions.reset({
-                  index: 0,
-                  routes: [{ name: 'Main' }],
-                }),
-              )
-            }
-          />
-        </View>
-      )}
+    <View style={[Layout.fill, Layout.colCenter]}>
+      <Brand />
+      <ActivityIndicator size={'large'} style={[Gutters.largeVMargin]} />
+      <Text style={Fonts.textCenter}>{t('welcome')}</Text>
     </View>
   )
 }

Diff for: template/src/Navigators/Application.js

@@ -24,7 +24,13 @@ const ApplicationNavigator = () => {
     <Stack.Navigator headerMode={'none'}>
       <Stack.Screen name="Startup" component={IndexStartupContainer} />
       {isApplicationLoaded && (
-        <Stack.Screen name="Main" component={MainNavigator} />
+        <Stack.Screen
+          name="Main"
+          component={MainNavigator}
+          options={{
+            animationEnabled: false,
+          }}
+        />
       )}
     </Stack.Navigator>
   )

Diff for: template/src/Navigators/Root.js

@@ -0,0 +1,32 @@
+/**
+ * Used to navigating without the navigation prop
+ * @see https://reactnavigation.org/docs/navigating-without-navigation-prop/
+ *
+ * You can add other navigation functions that you need and export them
+ */
+import * as React from 'react'
+import { CommonActions } from '@react-navigation/native'
+
+export const navigationRef = React.createRef()
+
+export function navigate(name, params) {
+  navigationRef.current?.navigate(name, params)
+}
+
+export function navigateAndReset(routes = [], index = 0) {
+  navigationRef.current?.dispatch(
+    CommonActions.reset({
+      index,
+      routes,
+    }),
+  )
+}
+
+export function navigateAndSimpleReset(name, index = 0) {
+  navigationRef.current?.dispatch(
+    CommonActions.reset({
+      index,
+      routes: [{ name }],
+    }),
+  )
+}

Diff for: template/src/Store/Startup/Init.js

@@ -4,12 +4,18 @@ import {
   buildAsyncReducers,
 } from '@thecodingmachine/redux-toolkit-wrapper'
 import FetchOne from '@/Store/User/FetchOne'
+import { navigateAndSimpleReset } from '@/Navigators/Root'
 
 export default {
   initialState: buildAsyncState(),
   action: buildAsyncActions('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))
+    // Navigate and reset to the main navigator
+    navigateAndSimpleReset('Main')
   }),
   reducers: buildAsyncReducers({ itemKey: null }), // We do not want to modify some item by default
 }

Diff for: template/src/Store/index.js

@@ -11,7 +11,6 @@ import {
   REGISTER,
 } from 'redux-persist'
 import { configureStore } from '@reduxjs/toolkit'
-import createDebugger from 'redux-flipper'
 
 import startup from './Startup'
 import user from './User'
@@ -39,7 +38,8 @@ const store = configureStore({
     })
 
     if (__DEV__ && !process.env.JEST_WORKER_ID) {
-      middlewares.concat(createDebugger())
+      const createDebugger = require('redux-flipper').default
+      middlewares.push(createDebugger())
     }
 
     return middlewares

Diff for: template/yarn.lock

@@ -6165,7 +6165,7 @@ readable-stream@^2.0.1, readable-stream@^2.2.2, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-redux-flipper@^1.4.0:
+redux-flipper@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/redux-flipper/-/redux-flipper-1.4.2.tgz#da765a675136e9893a002730703ec58d2f0e359b"
   integrity sha512-VfSdmWATaZD2BHAiMOEzxk+KSiSTAv/N5AyY64+dU+qif/KfinSHWW3+YVMCO+5rxne1Fr92YwsYJl8l9injDA==