Allow selecting default screen on application start

App.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Root, StyleProvider} from 'native-base';
-import AppNavigator from './navigation/AppNavigator';
+import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
 import ThemeManager from './utils/ThemeManager';
 import LocaleManager from './utils/LocaleManager';
 import * as Font from 'expo-font';
@@ -94,6 +94,7 @@ export default class App extends React.Component<Props, State> {
         if (this.state.showIntro) {
             return <CustomIntroSlider onDone={() => this.onIntroDone()}/>;
         } else {
+            const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
             return (
                 <Root>
                     <StyleProvider style={this.state.currentTheme}>

navigation/AppNavigator.js

@@ -1,7 +1,7 @@
 // @flow
 
 import {createAppContainer, createStackNavigator} from 'react-navigation';
-import MainTabNavigator from './MainTabNavigator';
+import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
 import SettingsScreen from '../screens/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
@@ -15,23 +15,26 @@ import {fromRight} from "react-navigation-transitions";
 /**
  * Create a stack navigator using the drawer to handle navigation between screens
  */
-export default createAppContainer(
+function createAppContainerWithInitialRoute(initialRoute: string) {
-    createStackNavigator({
+    return createAppContainer(
-            Main: MainTabNavigator,
+        createStackNavigator({
-            // Drawer: MainDrawerNavigator,
+                Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
-            ProximoListScreen: {screen: ProximoListScreen},
+                // Drawer: MainDrawerNavigator,
-            SettingsScreen: {screen: SettingsScreen},
+                ProximoListScreen: {screen: ProximoListScreen},
-            AboutScreen: {screen: AboutScreen},
+                SettingsScreen: {screen: SettingsScreen},
-            AboutDependenciesScreen: {screen: AboutDependenciesScreen},
+                AboutScreen: {screen: AboutScreen},
-            SelfMenuScreen: {screen: SelfMenuScreen},
+                AboutDependenciesScreen: {screen: AboutDependenciesScreen},
-            ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
+                SelfMenuScreen: {screen: SelfMenuScreen},
-            ProximoAboutScreen: {screen: ProximoAboutScreen},
+                ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
-            DebugScreen: {screen: DebugScreen},
+                ProximoAboutScreen: {screen: ProximoAboutScreen},
-        },
+                DebugScreen: {screen: DebugScreen},
-        {
+            },
-            initialRouteName: "Main",
+            {
-            mode: 'card',
+                initialRouteName: "Main",
-            headerMode: "none",
+                mode: 'card',
-            transitionConfig: () => fromRight(),
+                headerMode: "none",
-        })
+                transitionConfig: () => fromRight(),
-);
+            })
+    );
+}
+export {createAppContainerWithInitialRoute};

navigation/MainTabNavigator.js

@@ -8,6 +8,7 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
 import PlanexScreen from '../screens/PlanexScreen';
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
+import AsyncStorageManager from "../utils/AsyncStorageManager";
 
 const TAB_ICONS = {
     Home: 'triangle',
@@ -17,25 +18,30 @@ const TAB_ICONS = {
     Planex: 'timetable',
 };
 
+function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) {
+    return createMaterialBottomTabNavigator({
+        Home: {screen: HomeScreen},
+        Planning: {screen: PlanningScreen,},
+        Proxiwash: {screen: ProxiwashScreen,},
+        Proximo: {screen: ProximoMainScreen,},
+        Planex: {screen: PlanexScreen},
+    }, {
+        defaultNavigationOptions: ({navigation}) => ({
+            tabBarIcon: ({focused, horizontal, tintColor}) => {
+                let icon = TAB_ICONS[navigation.state.routeName];
 
-export default createMaterialBottomTabNavigator({
+                return <CustomMaterialIcon icon={icon} color={tintColor}/>;
-    Home: {screen: HomeScreen},
+            }
-    Planning: {screen: PlanningScreen,},
+        }),
-    Proxiwash: {screen: ProxiwashScreen,},
+        order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
-    Proximo: {screen: ProximoMainScreen,},
+        initialRouteName: initialRoute,
-    Planex: {screen: PlanexScreen},
+        activeColor: '#f0edf6',
-}, {
+        inactiveColor: '#4e1108',
-    defaultNavigationOptions: ({navigation}) => ({
+        backBehavior: 'initialRoute',
-        tabBarIcon: ({focused, horizontal, tintColor}) => {
+        barStyle: {backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary},
-            let icon = TAB_ICONS[navigation.state.routeName];
+    });
+}
+
+
+export {createMaterialBottomTabNavigatorWithInitialRoute};
 
-            return <CustomMaterialIcon icon={icon} color={tintColor}/>;
-        }
-    }),
-    order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
-    initialRouteName: 'Home',
-    activeColor: '#f0edf6',
-    inactiveColor: '#4e1108',
-    backBehavior: 'initialRoute',
-    barStyle: {backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary},
-});

screens/HomeScreen.js

@@ -8,6 +8,7 @@ import CustomMaterialIcon from '../components/CustomMaterialIcon';
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
 import Autolink from 'react-native-autolink';
 import ThemeManager from "../utils/ThemeManager";
+import AsyncStorageManager from "../utils/AsyncStorageManager";
 
 const ICON_AMICALE = require('../assets/amicale.png');
 const NAME_AMICALE = 'Amicale INSA Toulouse';

screens/SettingsScreen.js

@@ -32,6 +32,7 @@ type Props = {
 type State = {
     nightMode: boolean,
     proxiwashNotifPickerSelected: string,
+    startScreenPickerSelected: string,
 };
 
 /**
@@ -41,6 +42,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
     state = {
         nightMode: ThemeManager.getNightMode(),
         proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current,
+        startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
     };
 
     /**
@@ -60,6 +62,19 @@ export default class SettingsScreen extends React.Component<Props, State> {
         NotificationsManager.setMachineReminderNotificationTime(intVal);
     }
 
+    /**
+     * Save the value for the proxiwash reminder notification time
+     *
+     * @param value The value to store
+     */
+    onStartScreenPickerValueChange(value: string) {
+        let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key;
+        AsyncStorageManager.getInstance().savePref(key, value);
+        this.setState({
+            startScreenPickerSelected: value
+        });
+    }
+
     /**
      * Returns a picker allowing the user to select the proxiwash reminder notification time
      *
@@ -83,13 +98,35 @@ export default class SettingsScreen extends React.Component<Props, State> {
         );
     }
 
+    /**
+     * Returns a picker allowing the user to select the start screen
+     *
+     * @returns {React.Node}
+     */
+    getStartScreenPicker() {
+        return (
+            <Picker
+                note
+                mode="dropdown"
+                style={{width: 120}}
+                selectedValue={this.state.startScreenPickerSelected}
+                onValueChange={(value) => this.onStartScreenPickerValueChange(value)}
+            >
+                <Picker.Item label={i18n.t('screens.home')} value="Home"/>
+                <Picker.Item label={i18n.t('screens.planning')} value="Planning"/>
+                <Picker.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
+                <Picker.Item label={i18n.t('screens.proximo')} value="Proximo"/>
+                <Picker.Item label={'Planex'} value="Planex"/>
+            </Picker>
+        );
+    }
+
     /**
      * Toggle night mode and save it to preferences
      */
     toggleNightMode() {
         ThemeManager.getInstance().setNightMode(!this.state.nightMode);
         this.setState({nightMode: !this.state.nightMode});
-        // Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
         this.resetStack();
     }
 
@@ -133,7 +170,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                         {subtitle}
                     </Text>
                 </Body>
-                <Right style={{flex: 1}}>
+                <Right>
                     <CheckBox checked={this.state.nightMode}
                               onPress={() => this.toggleNightMode()}/>
                 </Right>
@@ -167,7 +204,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                     </Text>
                 </Body>
 
-                <Right style={{flex: 1}}>
+                <Right>
                     {control}
                 </Right>
             </ListItem>
@@ -195,10 +232,11 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 <Content padder>
                     <Card>
                         <CardItem header>
-                            <Text>{i18n.t('settingsScreen.appearanceCard')}</Text>
+                            <Text>{i18n.t('settingsScreen.generalCard')}</Text>
                         </CardItem>
                         <List>
                             {this.getToggleItem(() => this.toggleNightMode(), 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
+                            {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
                         </List>
                     </Card>
                     <Card>

translations/en.json

@@ -36,9 +36,11 @@
     }
   },
   "settingsScreen": {
-    "appearanceCard": "Appearance",
+    "generalCard": "General",
     "nightMode": "Night Mode",
     "nightModeSub": "Switch the app to a dark or light theme",
+    "startScreen": "Start Screen",
+    "startScreenSub": "Select which screen to start the app on",
     "proxiwashNotifReminder": "Machine running reminder",
     "proxiwashNotifReminderSub": "Choose when to send a notification to remind you a machine is running with your laundry",
     "proxiwashNotifReminderPicker": {

translations/fr.json

@@ -36,9 +36,11 @@
     }
   },
   "settingsScreen": {
-    "appearanceCard": "Apparence",
+    "generalCard": "Général",
     "nightMode": "Mode Nuit",
     "nightModeSub": "Passer l'application dans un thème sombre ou clair",
+    "startScreen": "Écran de démarrage",
+    "startScreenSub": "Choisissez l'écran utilisé au démarrage",
     "proxiwashNotifReminder": "Rappel de machine en cours",
     "proxiwashNotifReminderSub": "Choississez quand envoyer une notification pour vous rappeler qu'une machine avec votre linge est en cours",
     "proxiwashNotifReminderPicker": {

utils/AsyncStorageManager.js

@@ -53,6 +53,11 @@ export default class AsyncStorageManager {
             key: 'debugUnlocked',
             default: '0',
             current: '',
+        },
+        defaultStartScreen: {
+            key: 'defaultStartScreen',
+            default: 'Home',
+            current: '',
         }
     };