Merge branch 'startup-saga' into 'master'

Startup saga

See merge request tcm-projects/react-native-boilerplate!11

Author: Matthieu Napoli

App/App.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 import createStore from 'App/Stores'
-import ExampleScreen from './Containers/Example/ExampleScreen'
+import RootScreen from './Containers/Root/RootScreen'
 
 const { store, persistor } = createStore()
 
@@ -21,7 +21,7 @@ export default class App extends Component {
          * @see https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
          */}
         <PersistGate loading={null} persistor={persistor}>
-          <ExampleScreen />
+          <RootScreen />
         </PersistGate>
       </Provider>
     )

App/Containers/Root/RootScreen.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import { createStackNavigator } from 'react-navigation'
+import NavigationService from 'App/Services/NavigationService'
+import { View } from 'react-native'
+import styles from './RootScreenStyle'
+import ExampleScreen from 'App/Containers/Example/ExampleScreen'
+import SplashScreen from 'App/Containers/SplashScreen/SplashScreen'
+import { connect } from 'react-redux'
+import StartupActions from 'App/Stores/Startup/Actions'
+
+/**
+ * The root screen contains the application's navigation.
+ *
+ * @see https://reactnavigation.org/docs/en/hello-react-navigation.html#creating-a-stack-navigator
+ */
+const AppNav = createStackNavigator(
+  {
+    // Create the application routes here (the key is the route name, the value is the target screen)
+    // See https://reactnavigation.org/docs/en/stack-navigator.html#routeconfigs
+    SplashScreen: SplashScreen,
+    MainScreen: ExampleScreen,
+  },
+  {
+    // By default the application will show the splash screen
+    initialRouteName: 'SplashScreen',
+    // See https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig
+    headerMode: 'none',
+  }
+)
+
+class RootScreen extends Component {
+  componentDidMount() {
+    // Run the startup saga when the application is starting
+    this.props.startup()
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <AppNav
+          // Initialize the NavigationService (see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
+          ref={(navigatorRef) => {
+            NavigationService.setTopLevelNavigator(navigatorRef)
+          }}
+        />
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({})
+
+const mapDispatchToProps = (dispatch) => ({
+  startup: () => dispatch(StartupActions.startup()),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RootScreen)

App/Containers/Root/RootScreenStyle.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native'
+import ApplicationStyles from 'App/Theme/ApplicationStyles'
+
+export default StyleSheet.create({
+  container: {
+    ...ApplicationStyles.screen.container,
+  },
+})

App/Containers/SplashScreen/SplashScreen.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import styles from './SplashScreenStyle'
+
+export default class SplashScreen extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.logo}>
+          <Text>LOGO</Text>
+        </View>
+      </View>
+    )
+  }
+}

App/Containers/SplashScreen/SplashScreenStyle.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native'
+import Colors from 'App/Theme/Colors'
+import ApplicationStyles from 'App/Theme/ApplicationStyles'
+
+export default StyleSheet.create({
+  container: {
+    ...ApplicationStyles.screen.container,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.primary,
+  },
+  logo: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 70,
+    width: 70,
+    backgroundColor: 'white',
+  },
+})

App/Sagas/ExampleSaga.js

@@ -1,6 +1,6 @@
 import { put, call } from 'redux-saga/effects'
 import ExampleActions from 'App/Stores/Example/Actions'
-import { WeatherService } from 'App/Service/WeatherService'
+import { WeatherService } from 'App/Services/WeatherService'
 
 /**
  * A saga can contain multiple functions.

App/Sagas/StartupSaga.js

@@ -0,0 +1,18 @@
+import { put } from 'redux-saga/effects'
+import ExampleActions from 'App/Stores/Example/Actions'
+import NavigationService from 'App/Services/NavigationService'
+
+/**
+ * The startup saga is the place to define behavior to execute when the application starts.
+ */
+export function* startup() {
+  // Dispatch a redux action using `put()`
+  // @see https://redux-saga.js.org/docs/basics/DispatchingActions.html
+  yield put(ExampleActions.fetchTemperature())
+
+  // Add more operations you need to do at startup here
+  // ...
+
+  // When those operations are finished we redirect to the main screen
+  NavigationService.navigateAndReset('MainScreen')
+}

App/Sagas/index.js

@@ -1,12 +1,16 @@
 import { takeLatest } from 'redux-saga/effects'
 import { ExampleTypes } from 'App/Stores/Example/Actions'
+import { StartupTypes } from 'App/Stores/Startup/Actions'
 import { fetchTemperature } from './ExampleSaga'
+import { startup } from './StartupSaga'
 
 export default function* root() {
   yield [
     /**
      * @see https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
      */
+    // Run the startup saga when the application starts
+    takeLatest(StartupTypes.STARTUP, startup),
     // Call `fetchTemperature()` when a `FETCH_TEMPERATURE` action is triggered
     takeLatest(ExampleTypes.FETCH_TEMPERATURE, fetchTemperature),
   ]

App/Service/README.md

@@ -0,0 +1,61 @@
+import { NavigationActions, StackActions } from 'react-navigation'
+
+/**
+ * The navigation is implemented as a service so that it can be used outside of components, for example in sagas.
+ *
+ * @see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
+ */
+
+let navigator
+
+/**
+ * This function is called when the RootScreen is created to set the navigator instance to use.
+ */
+function setTopLevelNavigator(navigatorRef) {
+  navigator = navigatorRef
+}
+
+/**
+ * Call this function when you want to navigate to a specific route.
+ *
+ * @param routeName The name of the route to navigate to. Routes are defined in RootScreen using createStackNavigator()
+ * @param params Route parameters.
+ */
+function navigate(routeName, params) {
+  navigator.dispatch(
+    NavigationActions.navigate({
+      routeName,
+      params,
+    })
+  )
+}
+
+/**
+ * Call this function when you want to navigate to a specific route AND reset the navigation history.
+ *
+ * That means the user cannot go back. This is useful for example to redirect from a splashscreen to
+ * the main screen: the user should not be able to go back to the splashscreen.
+ *
+ * @param routeName The name of the route to navigate to. Routes are defined in RootScreen using createStackNavigator()
+ * @param params Route parameters.
+ */
+function navigateAndReset(routeName, params) {
+  navigator.dispatch(
+    StackActions.reset({
+      index: 0,
+      key: null,
+      actions: [
+        NavigationActions.navigate({
+          routeName,
+          params,
+        }),
+      ],
+    })
+  )
+}
+
+export default {
+  navigate,
+  navigateAndReset,
+  setTopLevelNavigator,
+}