Moved navigation to bottom tabs, replaced react navigation drawer by native-base-side-menu

App.js

@@ -15,6 +15,8 @@ import AppIntroSlider from 'react-native-app-intro-slider';
 import {clearThemeCache} from 'native-base-shoutem-theme';
 import AsyncStorageManager from "./utils/AsyncStorageManager";
 import CustomMaterialIcon from "./components/CustomMaterialIcon";
+import SideBar from "./components/Sidebar";
+import SideMenu from "react-native-side-menu";
 
 const styles = StyleSheet.create({
     mainContent: {
@@ -175,10 +177,13 @@ export default class App extends React.Component<Props, State> {
             return (
                 <Root>
                     <StyleProvider style={this.state.currentTheme}>
-                        <AppNavigator/>
+
+                            <AppNavigator/>
                     </StyleProvider>
                 </Root>
             );
         }
     }
+
+    menu = <View/>;
 }

components/BaseContainer.js

@@ -0,0 +1,70 @@
+// @flow
+
+import * as React from 'react';
+import {Container, Right} from "native-base";
+import CustomHeader from "./CustomHeader";
+import CustomSideMenu from "./CustomSideMenu";
+import CustomMaterialIcon from "./CustomMaterialIcon";
+import {Platform, View} from "react-native";
+import ThemeManager from "../utils/ThemeManager";
+import Touchable from "react-native-platform-touchable";
+
+
+type Props = {
+    navigation: Object,
+    headerTitle: string,
+    headerRightMenu: React.Node,
+    children: React.Node
+}
+
+type State = {
+    isOpen: boolean
+}
+
+
+export default class BaseContainer extends React.Component<Props, State> {
+
+    static defaultProps = {
+        headerRightMenu: <Right/>
+    };
+
+
+    state = {
+        isOpen: false,
+    };
+
+    toggle() {
+        console.log('coucou');
+        this.setState({
+            isOpen: !this.state.isOpen,
+        });
+    }
+
+    updateMenuState(isOpen: boolean) {
+
+        this.setState({isOpen});
+    }
+
+    render() {
+        console.log(this.state.isOpen);
+        return (
+            <CustomSideMenu navigation={this.props.navigation} isOpen={this.state.isOpen}
+                            onChange={(isOpen) => this.updateMenuState(isOpen)}>
+                <Container>
+                    <CustomHeader navigation={this.props.navigation} title={this.props.headerTitle}
+                                  leftButton={
+                                      <Touchable
+                                          style={{padding: 6}}
+                                          onPress={() => this.toggle()}>
+                                          <CustomMaterialIcon
+                                              color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                              icon="menu"/>
+                                      </Touchable>
+                                  }
+                    rightMenu={this.props.headerRightMenu}/>
+                    {this.props.children}
+                </Container>
+            </CustomSideMenu>
+        );
+    }
+}

components/CustomHeader.js

@@ -2,14 +2,15 @@
 
 import * as React from "react";
 import {Body, Header, Left, Right, Title} from "native-base";
-import {Platform, StyleSheet} from "react-native";
+import {Platform, StyleSheet, View} from "react-native";
 import {getStatusBarHeight} from "react-native-status-bar-height";
 import Touchable from 'react-native-platform-touchable';
 import ThemeManager from "../utils/ThemeManager";
 import CustomMaterialIcon from "./CustomMaterialIcon";
 
 type Props = {
-    backButton: boolean,
+    hasBackButton: boolean,
+    leftButton: React.Node,
     rightMenu: React.Node,
     title: string,
     navigation: Object,
@@ -19,7 +20,7 @@ type Props = {
 /**
  * Custom component defining a header using native base
  *
- * @prop backButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
+ * @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
  * @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified
  * @prop title {string} This header title
  * @prop navigation {Object} The navigation object from react navigation
@@ -27,7 +28,8 @@ type Props = {
 export default class CustomHeader extends React.Component<Props> {
 
     static defaultProps = {
-        backButton: false,
+        hasBackButton: false,
+        leftButton: <View/>,
         rightMenu: <Right/>,
         hasTabs: false,
     };
@@ -35,7 +37,7 @@ export default class CustomHeader extends React.Component<Props> {
     render() {
         let button;
         // Does the app have a back button or a burger menu ?
-        if (this.props.backButton)
+        if (this.props.hasBackButton)
             button =
                 <Touchable
                     style={{padding: 6}}
@@ -45,14 +47,7 @@ export default class CustomHeader extends React.Component<Props> {
                         icon="arrow-left"/>
                 </Touchable>;
         else
-            button =
-                <Touchable
-                    style={{padding: 6}}
-                    onPress={() => this.props.navigation.toggleDrawer()}>
-                    <CustomMaterialIcon
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                        icon="menu"/>
-                </Touchable>;
+            button = this.props.leftButton;
 
         return (
             <Header style={styles.header}>

components/CustomSideMenu.js

@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react';
+import SideMenu from "react-native-side-menu";
+import SideBar from "./Sidebar";
+
+
+type Props = {
+    navigation: Object,
+    children: React.Node,
+    isOpen: boolean,
+    onChange: Function
+}
+
+export default class CustomSideMenu extends React.Component<Props> {
+    render() {
+        console.log(this.props.isOpen);
+        return (
+            <SideMenu menu={<SideBar navigation={this.props.navigation}/>}
+                      isOpen={this.props.isOpen}
+                      onChange={this.props.onChange}>
+                {this.props.children}
+            </SideMenu>
+        );
+    }
+}

components/FetchedDataSectionList.js

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import WebDataManager from "../utils/WebDataManager";
-import {Container, H3, Spinner, Tab, TabHeading, Tabs, Text} from "native-base";
-import CustomHeader from "./CustomHeader";
+import {H3, Spinner, Tab, TabHeading, Tabs, Text} from "native-base";
 import {RefreshControl, SectionList, View} from "react-native";
 import CustomMaterialIcon from "./CustomMaterialIcon";
 import i18n from 'i18n-js';
 import ThemeManager from "../utils/ThemeManager";
+import BaseContainer from "./BaseContainer";
 
 type Props = {
     navigation: Object,
@@ -312,8 +312,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         const nav = this.props.navigation;
         const dataset = this.createDataset(this.state.fetchedData);
         return (
-            <Container>
-                <CustomHeader navigation={nav} title={this.getHeaderTranslation()}/>
+            <BaseContainer navigation={nav} headerTitle={this.getHeaderTranslation()}>
                 {this.hasTabs() ?
                     <Tabs>
                         {this.getTabbedView(dataset)}
@@ -321,7 +320,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                     :
                     this.getSectionList(dataset)
                 }
-            </Container>
+            </BaseContainer>
         );
     }
 

components/SideMenu.js → components/Sidebar.js

@@ -43,31 +43,6 @@ export default class SideBar extends React.Component<Props, State> {
         // If the link field is defined, clicking on the item will open the link
         this.dataSet = [
             {
-                name: i18n.t('screens.home'),
-                route: "Home",
-                icon: "home",
-            },
-            {
-                name: i18n.t('screens.planning'),
-                route: "Planning",
-                icon: "calendar-range",
-            },
-            {
-                name: "Proxiwash",
-                route: "Proxiwash",
-                icon: "washing-machine",
-            },
-            {
-                name: "Proximo",
-                route: "Proximo",
-                icon: "shopping",
-            },
-            {
-                name: 'Planex',
-                route: "Planex",
-                icon: "timetable",
-            },
-            {
                 name: "Amicale",
                 route: "amicale",
                 icon: "web",
@@ -79,16 +54,16 @@ export default class SideBar extends React.Component<Props, State> {
                 icon: "wikipedia",
                 link: WIKETUD_LINK
             },
-            {
-                name: i18n.t('screens.settings'),
-                route: "Settings",
-                icon: "settings",
-            },
-            {
-                name: i18n.t('screens.about'),
-                route: "About",
-                icon: "information",
-            },
+            // {
+            //     name: i18n.t('screens.settings'),
+            //     route: "Settings",
+            //     icon: "settings",
+            // },
+            // {
+            //     name: i18n.t('screens.about'),
+            //     route: "About",
+            //     icon: "information",
+            // },
         ];
     }
 
@@ -99,7 +74,6 @@ export default class SideBar extends React.Component<Props, State> {
     navigateToScreen(route: string) {
         this.props.navigation.navigate(route);
         this.props.navigation.closeDrawer();
-        this.setState({active: route});
     };
 
     render() {
@@ -118,7 +92,7 @@ export default class SideBar extends React.Component<Props, State> {
                         renderItem={({item}) =>
                             <ListItem
                                 button
-                                noBorder={item.name !== 'Wiketud' && item.name !== 'Planex'} // Display a separator before settings and Amicale
+                                noBorder
                                 selected={this.state.active === item.route}
                                 onPress={() => {
                                     if (item.link !== undefined)

navigation/AppNavigator.js

@@ -3,6 +3,7 @@
 import {createAppContainer, createStackNavigator} from 'react-navigation';
 
 import MainDrawerNavigator from './MainDrawerNavigator';
+import MainTabNavigator from './MainTabNavigator';
 import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
 
@@ -11,12 +12,13 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
  */
 export default createAppContainer(
     createStackNavigator({
-            Main: MainDrawerNavigator,
+            Tabs: MainTabNavigator,
+            // Drawer: MainDrawerNavigator,
             ProximoListScreen: {screen: ProximoListScreen},
             AboutDependenciesScreen: {screen: AboutDependenciesScreen},
         },
         {
-            initialRouteName: "Main",
+            initialRouteName: "Tabs",
             mode: 'card',
             headerMode: "none"
         })

navigation/MainDrawerNavigator.js

@@ -10,7 +10,7 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
 import PlanexScreen from '../screens/PlanexScreen';
 import SettingsScreen from '../screens/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
-import SideMenu from "../components/SideMenu";
+import Sidebar from "../components/Sidebar";
 
 /**
  * Creates the drawer navigation stack
@@ -24,7 +24,7 @@ export default createDrawerNavigator({
         Settings: {screen: SettingsScreen,},
         About: {screen: AboutScreen,},
     }, {
-        contentComponent: SideMenu,
+        contentComponent: Sidebar,
         initialRouteName: 'Home',
         backBehavior: 'initialRoute',
         drawerType: 'front',

navigation/MainTabNavigator.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
+
+import HomeScreen from '../screens/HomeScreen';
+import PlanningScreen from '../screens/PlanningScreen';
+import ProxiwashScreen from '../screens/ProxiwashScreen';
+import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
+import PlanexScreen from '../screens/PlanexScreen';
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
+
+const TAB_ICONS = {
+    Home: 'home',
+    Planning: 'calendar-range',
+    Proxiwash: 'washing-machine',
+    Proximo: 'shopping',
+    Planex: 'timetable',
+};
+
+
+export default 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];
+
+            return <CustomMaterialIcon icon={icon} color={tintColor}/>;
+        }
+    }),
+    order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
+    initialRouteName: 'Home',
+    activeColor: '#f0edf6',
+    inactiveColor: '#7f150a',
+    backBehavior: 'initialRoute',
+    barStyle: {backgroundColor: '#e42612'},
+});

package-lock.json

@@ -925,6 +925,18 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@callstack/react-theme-provider": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-1.0.7.tgz",
+      "integrity": "sha512-NTjvHadSLja5KruFXThC6rwLrewzbPSZFefgl5hTWXVZ40BsIDn3744AgregeuGTM3249K1cE9uN7UKua87pKQ==",
+      "requires": {
+        "create-react-context": "^0.2.1",
+        "deepmerge": "^2.1.1",
+        "flow-copy-source": "^1.3.0",
+        "hoist-non-react-statics": "^2.5.0",
+        "prop-types": "^15.6.0"
+      }
+    },
     "@expo/vector-icons": {
       "version": "10.0.2",
       "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-10.0.2.tgz",
@@ -1594,6 +1606,11 @@
         "lodash": "^4.17.11"
       }
     },
+    "async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -1786,6 +1803,11 @@
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.44.tgz",
       "integrity": "sha512-7MzElZPTyJ2fNvBkPxtFQ2fWIkVmuzw41+BZHSzpEq3ymB2MfeKp1+yXl/tS75xCx+WnyV+yb0kp+K1C3UNwmQ=="
     },
+    "binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
+    },
     "blueimp-md5": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.10.0.tgz",
@@ -1965,6 +1987,118 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
     },
+    "chokidar": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.6.tgz",
+      "integrity": "sha512-V2jUo67OKkc6ySiRpJrjlpJKl9kDuG+Xb8VgsGzb+aEouhgS1D0weyPU4lEzdAcsCAvrih2J2BqyXqHWvVLw5g==",
+      "requires": {
+        "anymatch": "^2.0.0",
+        "async-each": "^1.0.1",
+        "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
+        "glob-parent": "^3.1.0",
+        "inherits": "^2.0.3",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "normalize-path": "^3.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.2.1",
+        "upath": "^1.1.1"
+      },
+      "dependencies": {
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        }
+      }
+    },
     "clamp": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
@@ -2254,6 +2388,15 @@
         "object-assign": "^4.1.1"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -2289,6 +2432,11 @@
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz",
       "integrity": "sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s="
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "define-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
@@ -3130,6 +3278,75 @@
         "locate-path": "^2.0.0"
       }
     },
+    "flow-copy-source": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/flow-copy-source/-/flow-copy-source-1.3.0.tgz",
+      "integrity": "sha512-F8aRmNmtB5l+RFG7LAWj6IYU22K37BrhIXXCcQyxSsYWm0pNubnhBSEk+eoyGCou3+4aI4tReOfLFtgd5wnnYQ==",
+      "requires": {
+        "chokidar": "^2.0.0",
+        "fs-extra": "^5.0.0",
+        "glob": "^7.0.0",
+        "kefir": "^3.7.3",
+        "yargs": "^11.0.0"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
+          "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "yargs": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
+          "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.1.1",
+            "find-up": "^2.1.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^9.0.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "9.0.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-9.0.2.tgz",
+          "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=",
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
+      }
+    },
     "fontfaceobserver": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz",
@@ -3756,6 +3973,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "has-ansi": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
@@ -3965,6 +4187,14 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
+    "is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "requires": {
+        "binary-extensions": "^1.0.0"
+      }
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -4206,6 +4436,21 @@
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
     },
+    "kefir": {
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/kefir/-/kefir-3.8.6.tgz",
+      "integrity": "sha512-H/8ZTjmEEme2YL388rgy5fFlz2NM4ZImNI2rJrTsR8og454kpY3lPVv53W9lfevNELfNeYD33gMdIKHL25z7WA==",
+      "requires": {
+        "symbol-observable": "1.0.4"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+          "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0="
+        }
+      }
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -5326,6 +5571,11 @@
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.0.tgz",
       "integrity": "sha512-Hkavx/nY4/plImrZPHRk2CL9vpOymZLgEbMNX1U0bjcBL7QN9wODxyx0yaMZURSQaUtSEvDrfAvxa9oPb0at9g=="
     },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+    },
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
@@ -5928,6 +6178,38 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-native-paper": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-2.16.0.tgz",
+      "integrity": "sha512-dNHbVZNi9cfKr5sd/5pPGSJSo7ctnl61wLmRxWwvQ2VyEhDN+YxflvZ/vDZrnyivVWPcFS1nmiGCxABARISsuw==",
+      "requires": {
+        "@callstack/react-theme-provider": "^1.0.7",
+        "color": "^2.0.1",
+        "create-react-context": "^0.2.3",
+        "hoist-non-react-statics": "^3.1.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-native-safe-area-view": "^0.12.0"
+      },
+      "dependencies": {
+        "color": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz",
+          "integrity": "sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==",
+          "requires": {
+            "color-convert": "^1.9.1",
+            "color-string": "^1.5.2"
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+          "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
     "react-native-platform-touchable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz",
@@ -5938,6 +6220,14 @@
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.0.1.tgz",
       "integrity": "sha512-RENoo6/sJc3FApP7vJ1Js7WyDuTVh97bbr5aMjJyw3kqpR2/JDHyL/dQFfOvSSAc+VjitpR9/CfPPad7tLRiIA=="
     },
+    "react-native-safe-area-view": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.12.0.tgz",
+      "integrity": "sha512-UrAXmBC4KNR5K2eczIDZgqceWyKsgG9gmWFerHCvoyApfei8ceBB9u/c//PWCpS5Gt8MRLTmX5jPtzdXo2yNqg==",
+      "requires": {
+        "hoist-non-react-statics": "^2.3.1"
+      }
+    },
     "react-native-safe-module": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-module/-/react-native-safe-module-1.2.0.tgz",
@@ -5951,6 +6241,14 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz",
       "integrity": "sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA=="
     },
+    "react-native-side-menu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-native-side-menu/-/react-native-side-menu-1.1.3.tgz",
+      "integrity": "sha1-bvXSIy7PcYMS32zt7wGRSLrDBzo=",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-status-bar-height": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.3.1.tgz",
@@ -6035,6 +6333,29 @@
         "react-native-tab-view": "^1.2.0"
       }
     },
+    "react-navigation-material-bottom-tabs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-navigation-material-bottom-tabs/-/react-navigation-material-bottom-tabs-1.0.0.tgz",
+      "integrity": "sha512-fmPOt82xYpNYWh7gDdk38ce2TDmKuGnVaC7Pd67Ss62bjZ2CwmX9kOXExThtdY039zDGIcABDq9h65c8TQeTUA==",
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "prop-types": "^15.6.0",
+        "react-navigation-tabs": "1.0.0"
+      },
+      "dependencies": {
+        "react-navigation-tabs": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/react-navigation-tabs/-/react-navigation-tabs-1.0.0.tgz",
+          "integrity": "sha512-2oWPk+XfwHihgdOBhuAuzzU94NPhwdvuzseL30R3VsggunfVB4cUtNiQjRP4rVVpdGgJygQtws1eRbUsQ9cECA==",
+          "requires": {
+            "hoist-non-react-statics": "^2.5.0",
+            "prop-types": "^15.6.1",
+            "react-lifecycles-compat": "^3.0.4",
+            "react-native-tab-view": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-navigation-stack": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-1.4.0.tgz",
@@ -6116,6 +6437,279 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "requires": {
+            "debug": "^2.3.3",
+            "define-property": "^0.2.5",
+            "extend-shallow": "^2.0.1",
+            "posix-character-classes": "^0.1.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "requires": {
+                "is-descriptor": "^0.1.0"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "requires": {
+                "kind-of": "^3.0.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "^1.1.5"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "requires": {
+                "kind-of": "^3.0.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "^1.1.5"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "requires": {
+                "is-accessor-descriptor": "^0.1.6",
+                "is-data-descriptor": "^0.1.4",
+                "kind-of": "^5.0.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "requires": {
+            "array-unique": "^0.3.2",
+            "define-property": "^1.0.0",
+            "expand-brackets": "^2.1.4",
+            "extend-shallow": "^2.0.1",
+            "fragment-cache": "^0.2.1",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "requires": {
+                "is-descriptor": "^1.0.0"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "recompose": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
@@ -7419,6 +8013,11 @@
         }
       }
     },
+    "upath": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
+      "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q=="
+    },
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",

package.json

@@ -23,10 +23,13 @@
     "react-native": "^0.59.9",
     "react-native-app-intro-slider": "^3.0.0",
     "react-native-autolink": "^1.8.1",
+    "react-native-paper": "^2.16.0",
     "react-native-platform-touchable": "^1.1.1",
+    "react-native-side-menu": "^1.1.3",
     "react-native-status-bar-height": "^2.3.1",
     "react-native-webview": "^5.8.1",
-    "react-navigation": "^3.11.0"
+    "react-navigation": "^3.11.0",
+    "react-navigation-material-bottom-tabs": "^1.0.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.1.1",

screens/About/AboutDependenciesScreen.js

@@ -30,7 +30,7 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
         const data = generateListFromObject(nav.getParam('data', {}));
         return (
             <Container>
-                <CustomHeader backButton={true} navigation={nav} title={i18n.t('aboutScreen.libs')}/>
+                <CustomHeader hasBackButton={true} navigation={nav} title={i18n.t('aboutScreen.libs')}/>
                 <Content>
                     <FlatList
                         data={data}

screens/PlanexScreen.js

@@ -8,6 +8,7 @@ import WebView from "react-native-webview";
 import Touchable from "react-native-platform-touchable";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
+import BaseContainer from "../components/BaseContainer";
 
 type Props = {
     navigation: Object,
@@ -17,7 +18,9 @@ type State = {
     isFinishedLoading: boolean
 }
 
-const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
+// const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
+// TODO use real url in prod
+const PLANEX_URL = 'https://srv-falcon.etud.insa-toulouse.fr/~vergnet/planex/planex.insa-toulouse.fr.html';
 
 /**
  * Class defining the app's planex screen.
@@ -53,8 +56,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         return (
-            <Container>
-                <CustomHeader navigation={nav} title={'Planex'} rightMenu={this.getRefreshButton()}/>
+            <BaseContainer navigation={nav} headerTitle={'Planex'} headerRightMenu={this.getRefreshButton()}>
                 <WebView
                     ref={ref => (this.webview = ref)}
                     source={{uri: PLANEX_URL}}
@@ -76,7 +78,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                         </View>
                     }
                 />
-            </Container>
+            </BaseContainer>
         );
     }
 }

screens/PlanningScreen.js

@@ -1,13 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Container, H3, Text} from 'native-base';
-import CustomHeader from "../components/CustomHeader";
+import {Button, H3, Text} from 'native-base';
 import i18n from "i18n-js";
 import {Platform, View} from "react-native";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
 import {Linking} from "expo";
+import BaseContainer from "../components/BaseContainer";
 
 type Props = {
     navigation: Object,
@@ -28,8 +28,7 @@ export default class PlanningScreen extends React.Component<Props> {
     render() {
         const nav = this.props.navigation;
         return (
-            <Container>
-                <CustomHeader navigation={nav} title={i18n.t('screens.planning')}/>
+            <BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
                 <View style={{
                     flexGrow: 1,
                     justifyContent: 'center',
@@ -70,7 +69,7 @@ export default class PlanningScreen extends React.Component<Props> {
                         </Button>
                         : <View/>}
                 </View>
-            </Container>
+            </BaseContainer>
         );
     }
 }

screens/Proximo/ProximoListScreen.js

@@ -188,7 +188,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
 
         return (
             <Container>
-                <CustomHeader backButton={true} navigation={nav} title={navType} rightMenu={
+                <CustomHeader hasBackButton={true} navigation={nav} title={navType} rightMenu={
                     <Right>
                         <Menu
                             ref={this.setMenuRef}