Merge branch 'dev'

2020-02-05 10:54:52 +01:00 · 2020-02-05 10:54:52 +01:00 · 08f98caf30
commit 08f98caf30
parent 5939319df2 878ff1b308
19 changed files with 364 additions and 313 deletions
--- a/App.js
+++ b/App.js
@ -1,10 +1,9 @@
 // @flow

 import * as React from 'react';
-import {StatusBar, Platform} from 'react-native';
+import {Platform, StatusBar} from 'react-native';
 import {Root, StyleProvider} from 'native-base';
 import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
-import ThemeManager from './utils/ThemeManager';
 import LocaleManager from './utils/LocaleManager';
 import * as Font from 'expo-font';
 import {clearThemeCache} from 'native-base-shoutem-theme';
@ -12,6 +11,7 @@ import AsyncStorageManager from "./utils/AsyncStorageManager";
 import CustomIntroSlider from "./components/CustomIntroSlider";
 import {AppLoading} from 'expo';
 import NotificationsManager from "./utils/NotificationsManager";
+import ThemeManager from './utils/ThemeManager';

 type Props = {};

@ -49,12 +49,9 @@ export default class App extends React.Component<Props, State> {

    setupStatusBar() {
        if (Platform.OS === 'ios') {
-            console.log(ThemeManager.getNightMode());
            if (ThemeManager.getNightMode()) {
-                console.log('setting light mode');
                StatusBar.setBarStyle('light-content', true);
            } else {
-                console.log('setting dark mode');
                StatusBar.setBarStyle('dark-content', true);
            }
        }
@ -73,7 +70,6 @@ export default class App extends React.Component<Props, State> {
    }

    async loadAssetsAsync() {
-        console.log('Starting loading assets...');
        // Wait for custom fonts to be loaded before showing the app
        await Font.loadAsync({
            'Roboto': require('native-base/Fonts/Roboto.ttf'),
@ -83,18 +79,15 @@ export default class App extends React.Component<Props, State> {
        await AsyncStorageManager.getInstance().loadPreferences();
        ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
        await NotificationsManager.initExpoToken();
-        // console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
    }

    onLoadFinished() {
        // Only show intro if this is the first time starting the app
-        console.log('Finished loading');
        this.setState({
            isLoading: false,
            currentTheme: ThemeManager.getCurrentTheme(),
            showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1',
            showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1'
-            // showIntro: true
        });
        // Status bar goes dark if set too fast
        setTimeout(this.setupStatusBar,
--- a/Changelog.md
+++ b/Changelog.md
@ -2,6 +2,15 @@

 Pensez à garder l'appli à jour pour profiter des dernières fonctionnalités !

+ - **v1.5.0** - _05/02/2020_
+    - Amélioration des performances de l'application
+    - Amélioration du menu gauche
+    - Ajout d'animations au changement d'écran
+    - Affichage de l'événement de l'accueil directement au clic, au lieu de juste amener sur la liste
+    - _Notes de développement :_
+        - Passage de React Navigation 3 à 4
+        - Mise à jour d'autres librairies
+
 - **v1.4.0** - _01/02/2020_
    - Correction d'un crash lors du rafraichissement de planex
    - Correction de bugs divers
--- a/app.json
+++ b/app.json
@ -10,7 +10,7 @@
      "android",
      "web"
    ],
-    "version": "1.4.0",
+    "version": "1.5.0",
    "orientation": "portrait",
    "primaryColor": "#be1522",
    "icon": "./assets/android.icon.png",
@ -36,7 +36,7 @@
    },
    "android": {
      "package": "fr.amicaleinsat.application",
-      "versionCode": 12,
+      "versionCode": 13,
      "icon": "./assets/android.icon.png",
      "adaptiveIcon": {
        "foregroundImage": "./assets/android.adaptive-icon.png",
--- a/babel.config.js
+++ b/babel.config.js
@ -2,5 +2,10 @@ module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
+    env: {
+      production: {
+        plugins: ['react-native-paper/babel'],
+      },
+    },
  };
 };
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@ -3,7 +3,6 @@
 import * as React from 'react';
 import {Container} from "native-base";
 import CustomHeader from "./CustomHeader";
-import CustomSideMenu from "./CustomSideMenu";
 import CustomMaterialIcon from "./CustomMaterialIcon";
 import {Platform, StatusBar, View} from "react-native";
 import ThemeManager from "../utils/ThemeManager";
@ -15,6 +14,7 @@ import {NavigationActions} from "react-navigation";
 type Props = {
    navigation: Object,
    headerTitle: string,
+    headerSubtitle: string,
    headerRightButton: React.Node,
    children: React.Node,
    hasTabs: boolean,
@ -25,7 +25,6 @@ type Props = {
 }

 type State = {
-    isOpen: boolean,
    isHeaderVisible: boolean
 }

@ -39,24 +38,17 @@ export default class BaseContainer extends React.Component<Props, State> {
        hasSideMenu: true,
        enableRotation: false,
        hideHeaderOnLandscape: false,
+        headerSubtitle: '',
    };
    willBlurSubscription: function;
    willFocusSubscription: function;
    state = {
-        isOpen: false,
        isHeaderVisible: true,
    };

    toggle() {
-        this.setState({
-            isOpen: !this.state.isOpen,
-        });
+        this.props.navigation.toggleDrawer();
    }
-
-    updateMenuState(isOpen: boolean) {
-        this.setState({isOpen});
-    }
-
    /**
     * Register for blur event to close side menu on screen change
     */
@ -87,7 +79,6 @@ export default class BaseContainer extends React.Component<Props, State> {
            () => {
                if (this.props.enableRotation)
                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-                this.setState({isOpen: false});
            }
        );
    }
@ -107,7 +98,9 @@ export default class BaseContainer extends React.Component<Props, State> {
            <Container>
                {this.state.isHeaderVisible ?
                    <CustomHeader
-                        navigation={this.props.navigation} title={this.props.headerTitle}
+                        navigation={this.props.navigation}
+                        title={this.props.headerTitle}
+                        subtitle={this.props.headerSubtitle}
                        leftButton={
                            <Touchable
                                style={{padding: 6}}
@ -128,20 +121,6 @@ export default class BaseContainer extends React.Component<Props, State> {


    render() {
-        return (
-            <View style={{
-                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
-                width: '100%',
-                height: '100%'
-            }}>
-                {this.props.hasSideMenu ?
-                    <CustomSideMenu
-                        navigation={this.props.navigation} isOpen={this.state.isOpen}
-                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
-                        {this.getMainContainer()}
-                    </CustomSideMenu> :
-                    this.getMainContainer()}
-            </View>
-        );
+        return (this.getMainContainer());
    }
 }
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@ -1,13 +1,14 @@
 // @flow

 import * as React from "react";
-import {Body, Header, Input, Item, Left, Right, Title} from "native-base";
+import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base";
 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";
 import i18n from "i18n-js";
+import {NavigationActions} from 'react-navigation';

 type Props = {
    hasBackButton: boolean,
@ -17,6 +18,7 @@ type Props = {
    leftButton: React.Node,
    rightButton: React.Node,
    title: string,
+    subtitle: string,
    navigation: Object,
    hasTabs: boolean,
 };
@ -37,6 +39,7 @@ export default class CustomHeader extends React.Component<Props> {
        searchCallback: () => null,
        shouldFocusSearchBar: false,
        title: '',
+        subtitle: '',
        leftButton: <View/>,
        rightButton: <View/>,
        hasTabs: false,
@ -51,23 +54,39 @@ export default class CustomHeader extends React.Component<Props> {

    getSearchBar() {
        return (
-            <Item
-                style={{
-                    width: '100%',
-                    marginBottom: 7
-                }}>
-                <CustomMaterialIcon
-                    icon={'magnify'}
-                    color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
-                <Input
-                    ref="searchInput"
-                    placeholder={i18n.t('proximoScreen.search')}
-                    placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
-                    onChangeText={(text) => this.props.searchCallback(text)}/>
-            </Item>
+            <Body>
+                <Item
+                    style={{
+                        width: '100%',
+                        marginBottom: 7
+                    }}>
+                    <CustomMaterialIcon
+                        icon={'magnify'}
+                        color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
+                    <Input
+                        ref="searchInput"
+                        placeholder={i18n.t('proximoScreen.search')}
+                        placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
+                        onChangeText={(text) => this.props.searchCallback(text)}/>
+                </Item>
+            </Body>
        );
    }

+    getHeaderTitle() {
+        return (
+            <Body>
+                <Title style={{
+                    color: ThemeManager.getCurrentThemeVariables().toolbarTextColor
+                }}>
+                    {this.props.title}
+                </Title>
+                {this.props.subtitle !== '' ? <Subtitle>{this.props.subtitle}</Subtitle> : null}
+            </Body>
+        );
+    }
+
+
    render() {
        let button;
        // Does the app have a back button or a burger menu ?
@ -75,10 +94,13 @@ export default class CustomHeader extends React.Component<Props> {
            button =
                <Touchable
                    style={{padding: 6}}
-                    onPress={() => this.props.navigation.goBack()}>
+                    onPress={() => {
+                        const backAction = NavigationActions.back();
+                        this.props.navigation.dispatch(backAction);
+                    }}>
                    <CustomMaterialIcon
                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                        icon="arrow-left"/>
+                        icon={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}/>
                </Touchable>;
        else
            button = this.props.leftButton;
@ -89,14 +111,9 @@ export default class CustomHeader extends React.Component<Props> {
                <Left style={{flex: 0}}>
                    {button}
                </Left>
-                <Body>
-                    {this.props.hasSearchField ?
-                        this.getSearchBar() :
-                        <Title style={{
-                            paddingLeft: 10,
-                            color: ThemeManager.getCurrentThemeVariables().toolbarTextColor
-                        }}>{this.props.title}</Title>}
-                </Body>
+                {this.props.hasSearchField ?
+                    this.getSearchBar() :
+                    this.getHeaderTitle()}
                <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
                    {this.props.rightButton}
                </Right>
@ -104,7 +121,6 @@ export default class CustomHeader extends React.Component<Props> {
    }
 };

-
 // Fix header in status bar on Android
 const styles = StyleSheet.create({
    header: {
--- a/components/CustomSideMenu.js
+++ b/components/CustomSideMenu.js
@ -1,48 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import SideMenu from "react-native-side-menu";
-import SideBar from "./Sidebar";
-import {View} from "react-native";
-
-
-type Props = {
-    navigation: Object,
-    children: React.Node,
-    isOpen: boolean,
-    onChange: Function,
-}
-
-type State = {
-    shouldShowMenu: boolean, // Prevent menu from showing in transitions between tabs
-}
-
-export default class CustomSideMenu extends React.Component<Props, State> {
-
-    state = {
-        shouldShowMenu: this.props.isOpen,
-    };
-
-    // Stop the side menu from being shown while tab transition is playing
-    // => Hide the menu when behind the actual screen
-    onMenuMove(percent: number) {
-        if (percent <= 0)
-            this.setState({shouldShowMenu: false});
-        else if (this.state.shouldShowMenu === false)
-            this.setState({shouldShowMenu: true});
-    }
-
-    render() {
-        return (
-            <SideMenu menu={
-                this.state.shouldShowMenu ?
-                    <SideBar navigation={this.props.navigation}/>
-                    : <View/>}
-                      isOpen={this.props.isOpen}
-                      onChange={this.props.onChange}
-                      onSliding={(percent) => this.onMenuMove(percent)}>
-                {this.props.children}
-            </SideMenu>
-        );
-    }
-}
--- a/navigation/AppNavigator.js
+++ b/navigation/AppNavigator.js
@ -1,56 +1,14 @@
 // @flow

-import {createAppContainer, createStackNavigator} from 'react-navigation';
-import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
-import SettingsScreen from '../screens/SettingsScreen';
-import AboutScreen from '../screens/About/AboutScreen';
-import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
-import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
-import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
-import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
-import SelfMenuScreen from '../screens/SelfMenuScreen';
-import TutorInsaScreen from "../screens/Websites/TutorInsaScreen";
-import AmicaleScreen from "../screens/Websites/AmicaleScreen";
-import WiketudScreen from "../screens/Websites/WiketudScreen";
-import ElusEtudScreen from "../screens/Websites/ElusEtudScreen";
-import BlueMindScreen from "../screens/Websites/BlueMindScreen";
-import EntScreen from "../screens/Websites/EntScreen";
-import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
-import DebugScreen from '../screens/DebugScreen';
-import {fromRight} from "react-navigation-transitions";
+import {createAppContainer} from 'react-navigation';
+import {createDrawerNavigatorWithInitialRoute} from './DrawerNavigator';


 /**
 * Create a stack navigator using the drawer to handle navigation between screens
 */
 function createAppContainerWithInitialRoute(initialRoute: string) {
-    return createAppContainer(
-        createStackNavigator({
-                Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
-                // Drawer: MainDrawerNavigator,
-                ProximoListScreen: {screen: ProximoListScreen},
-                SettingsScreen: {screen: SettingsScreen},
-                AboutScreen: {screen: AboutScreen},
-                AboutDependenciesScreen: {screen: AboutDependenciesScreen},
-                SelfMenuScreen: {screen: SelfMenuScreen},
-                TutorInsaScreen: {screen: TutorInsaScreen},
-                AmicaleScreen: {screen: AmicaleScreen},
-                WiketudScreen: {screen: WiketudScreen},
-                ElusEtudScreen: {screen: ElusEtudScreen},
-                BlueMindScreen: {screen: BlueMindScreen},
-                EntScreen: {screen: EntScreen},
-                AvailableRoomScreen: {screen: AvailableRoomScreen},
-                ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
-                ProximoAboutScreen: {screen: ProximoAboutScreen},
-                DebugScreen: {screen: DebugScreen},
-            },
-            {
-                initialRouteName: "Main",
-                mode: 'card',
-                headerMode: "none",
-                transitionConfig: () => fromRight(),
-            })
-    );
+    return createAppContainer(createDrawerNavigatorWithInitialRoute(initialRoute));
 }

 export {createAppContainerWithInitialRoute};
--- a/navigation/DrawerNavigator.js
+++ b/navigation/DrawerNavigator.js
@ -0,0 +1,79 @@
+// @flow
+
+import { createDrawerNavigator } from 'react-navigation-drawer';
+import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
+import SettingsScreen from '../screens/SettingsScreen';
+import AboutScreen from '../screens/About/AboutScreen';
+import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
+import SelfMenuScreen from '../screens/SelfMenuScreen';
+import TutorInsaScreen from "../screens/Websites/TutorInsaScreen";
+import AmicaleScreen from "../screens/Websites/AmicaleScreen";
+import WiketudScreen from "../screens/Websites/WiketudScreen";
+import ElusEtudScreen from "../screens/Websites/ElusEtudScreen";
+import BlueMindScreen from "../screens/Websites/BlueMindScreen";
+import EntScreen from "../screens/Websites/EntScreen";
+import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
+import DebugScreen from '../screens/DebugScreen';
+import Sidebar from "../components/Sidebar";
+import {createStackNavigator, TransitionPresets} from "react-navigation-stack";
+
+const AboutStack = createStackNavigator({
+        AboutScreen: {screen: AboutScreen},
+        AboutDependenciesScreen: {screen: AboutDependenciesScreen},
+        DebugScreen: {screen: DebugScreen},
+    },
+    {
+        initialRouteName: "AboutScreen",
+        mode: 'card',
+        headerMode: "none",
+        defaultNavigationOptions: {
+            gestureEnabled: true,
+            cardOverlayEnabled: true,
+            ...TransitionPresets.SlideFromRightIOS,
+        },
+    });
+
+
+// Create a stack to use animations
+function createDrawerStackWithInitialRoute(initialRoute: string) {
+    return createStackNavigator({
+            Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
+            SettingsScreen: {screen: SettingsScreen},
+            AboutScreen: AboutStack,
+            SelfMenuScreen: {screen: SelfMenuScreen},
+            TutorInsaScreen: {screen: TutorInsaScreen},
+            AmicaleScreen: {screen: AmicaleScreen},
+            WiketudScreen: {screen: WiketudScreen},
+            ElusEtudScreen: {screen: ElusEtudScreen},
+            BlueMindScreen: {screen: BlueMindScreen},
+            EntScreen: {screen: EntScreen},
+            AvailableRoomScreen: {screen: AvailableRoomScreen},
+        },
+        {
+            initialRouteName: "Main",
+            mode: 'card',
+            headerMode: "none",
+            defaultNavigationOptions: {
+                gestureEnabled: true,
+                cardOverlayEnabled: true,
+                ...TransitionPresets.SlideFromRightIOS,
+            },
+        });
+}
+
+/**
+ * Creates the drawer navigation stack
+ */
+function createDrawerNavigatorWithInitialRoute(initialRoute: string) {
+    return createDrawerNavigator({
+        Main: createDrawerStackWithInitialRoute(initialRoute),
+    }, {
+        contentComponent: Sidebar,
+        initialRouteName: 'Main',
+        backBehavior: 'initialRoute',
+        drawerType: 'front',
+        useNativeAnimations: true,
+    });
+}
+
+export {createDrawerNavigatorWithInitialRoute};
--- a/navigation/MainTabNavigator.js
+++ b/navigation/MainTabNavigator.js
@ -1,10 +1,15 @@
 import * as React from 'react';
+import {createStackNavigator, TransitionPresets} from 'react-navigation-stack';
 import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";

 import HomeScreen from '../screens/HomeScreen';
 import PlanningScreen from '../screens/PlanningScreen';
+import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
+import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
 import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
+import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
+import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
@ -17,12 +22,78 @@ const TAB_ICONS = {
    Planex: 'timetable',
 };

+const ProximoStack = createStackNavigator({
+        ProximoMainScreen: {screen: ProximoMainScreen},
+        ProximoListScreen: {screen: ProximoListScreen},
+        ProximoAboutScreen: {
+            screen: ProximoAboutScreen,
+            navigationOptions: () => ({
+                ...TransitionPresets.ModalSlideFromBottomIOS,
+            }),
+        },
+    },
+    {
+        initialRouteName: "ProximoMainScreen",
+        mode: 'card',
+        headerMode: "none",
+        defaultNavigationOptions: {
+            gestureEnabled: true,
+            cardOverlayEnabled: true,
+            ...TransitionPresets.SlideFromRightIOS,
+        },
+    });
+
+const ProxiwashStack = createStackNavigator({
+        ProxiwashScreen: {screen: ProxiwashScreen},
+        ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
+    },
+    {
+        initialRouteName: "ProxiwashScreen",
+        mode: 'card',
+        headerMode: "none",
+        defaultNavigationOptions: {
+            gestureEnabled: true,
+            cardOverlayEnabled: true,
+            ...TransitionPresets.ModalSlideFromBottomIOS,
+        },
+    });
+
+const PlanningStack = createStackNavigator({
+        PlanningScreen: {screen: PlanningScreen},
+        PlanningDisplayScreen: {screen: PlanningDisplayScreen},
+    },
+    {
+        initialRouteName: "PlanningScreen",
+        mode: 'card',
+        headerMode: "none",
+        defaultNavigationOptions: {
+            gestureEnabled: true,
+            cardOverlayEnabled: true,
+            ...TransitionPresets.ModalSlideFromBottomIOS,
+        },
+    });
+
+const HomeStack = createStackNavigator({
+        HomeScreen: {screen: HomeScreen},
+        PlanningDisplayScreen: {screen: PlanningDisplayScreen},
+    },
+    {
+        initialRouteName: "HomeScreen",
+        mode: 'card',
+        headerMode: "none",
+        defaultNavigationOptions: {
+            gestureEnabled: true,
+            cardOverlayEnabled: true,
+            ...TransitionPresets.ModalSlideFromBottomIOS,
+        },
+    });
+
 function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) {
    return createMaterialBottomTabNavigator({
-        Home: {screen: HomeScreen},
-        Planning: {screen: PlanningScreen,},
-        Proxiwash: {screen: ProxiwashScreen,},
-        Proximo: {screen: ProximoMainScreen,},
+        Home: HomeStack,
+        Planning: PlanningStack,
+        Proxiwash: ProxiwashStack,
+        Proximo: ProximoStack,
        Planex: {
            screen: PlanexScreen,
            navigationOptions: ({navigation}) => {
--- a/package.json
+++ b/package.json
@ -8,6 +8,7 @@
    "eject": "expo eject"
  },
  "dependencies": {
+    "@react-native-community/masked-view": "0.1.5",
    "expo": "^36.0.0",
    "expo-font": "~8.0.0",
    "expo-linear-gradient": "~8.0.0",
@ -21,19 +22,22 @@
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-app-intro-slider": "^3.0.0",
    "react-native-autolink": "^1.8.1",
-    "react-native-calendars": "^1.212.0",
+    "react-native-calendars": "^1.260.0",
    "react-native-gesture-handler": "~1.5.0",
-    "react-native-material-menu": "^0.6.7",
+    "react-native-material-menu": "^1.0.0",
    "react-native-modalize": "^1.3.6",
    "react-native-paper": "^3.5.1",
    "react-native-platform-touchable": "^1.1.1",
+    "react-native-reanimated": "~1.4.0",
    "react-native-render-html": "^4.1.2",
+    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
-    "react-native-side-menu": "^1.1.3",
    "react-native-status-bar-height": "^2.3.1",
    "react-native-webview": "7.4.3",
-    "react-navigation": "^3.13.0",
-    "react-navigation-material-bottom-tabs": "^1.1.1",
+    "react-navigation": "^4.1.0",
+    "react-navigation-drawer": "^2.3.3",
+    "react-navigation-material-bottom-tabs": "^2.1.5",
+    "react-navigation-stack": "^2.1.0",
    "react-navigation-transitions": "^1.0.12"
  },
  "devDependencies": {
--- a/screens/About/AboutScreen.js
+++ b/screens/About/AboutScreen.js
@ -319,14 +319,12 @@ export default class AboutScreen extends React.Component<Props, State> {

    tryUnlockDebugMode() {
        this.debugTapCounter = this.debugTapCounter + 1;
-        console.log(this.debugTapCounter);
        if (this.debugTapCounter >= 4) {
            this.unlockDebugMode();
        }
    }

    unlockDebugMode() {
-        console.log('unlocked');
        this.setState({isDebugUnlocked: true});
        let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
        AsyncStorageManager.getInstance().savePref(key, '1');
--- a/screens/DebugScreen.js
+++ b/screens/DebugScreen.js
@ -83,7 +83,6 @@ export default class DebugScreen extends React.Component<Props, State> {

    alertCurrentExpoToken() {
        let token = AsyncStorageManager.getInstance().preferences.expoToken.current;
-        console.log(token);
        Alert.alert(
            'Expo Token',
            token,
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@ -310,7 +310,12 @@ export default class HomeScreen extends FetchedDataSectionList {
                </Text>;
        } else
            subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
-        let clickAction = () => this.props.navigation.navigate('Planning');
+        let clickAction = () => {
+            if (isAvailable)
+                this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
+            else
+                this.props.navigation.navigate('PlanningScreen');
+        };

        let displayEvent = this.getDisplayEvent(futureEvents);

--- a/screens/PlanningDisplayScreen.js
+++ b/screens/PlanningDisplayScreen.js
@ -0,0 +1,69 @@
+// @flow
+
+import * as React from 'react';
+import {Image} from 'react-native';
+import {Container, Content, H1, H3, View} from 'native-base';
+import CustomHeader from "../components/CustomHeader";
+import ThemeManager from "../utils/ThemeManager";
+import HTML from "react-native-render-html";
+import {Linking} from "expo";
+import PlanningEventManager from '../utils/PlanningEventManager';
+import i18n from 'i18n-js';
+
+type Props = {
+    navigation: Object,
+};
+
+function openWebLink(link) {
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
+}
+
+/**
+ * Class defining an about screen. This screen shows the user information about the app and it's author.
+ */
+export default class PlanningDisplayScreen extends React.Component<Props> {
+
+    render() {
+        const nav = this.props.navigation;
+        const displayData = nav.getParam('data', []);
+        return (
+            <Container>
+                <CustomHeader
+                    navigation={nav}
+                    title={displayData.title}
+                    subtitle={PlanningEventManager.getFormattedTime(displayData)}
+                    hasBackButton={true}/>
+                <Content padder>
+                    <H1>
+                        {displayData.title}
+                    </H1>
+                    <H3 style={{
+                        marginTop: 10,
+                        color: ThemeManager.getCurrentThemeVariables().listNoteColor
+                    }}>
+                        {PlanningEventManager.getFormattedTime(displayData)}
+                    </H3>
+                    {displayData.logo !== null ?
+                        <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
+                            <Image style={{flex: 1, resizeMode: "contain"}}
+                                   source={{uri: displayData.logo}}/>
+                        </View>
+                        : <View/>}
+
+                    {displayData.description !== null ?
+                        // Surround description with div to allow text styling if the description is not html
+                        <HTML html={"<div>" + displayData.description + "</div>"}
+                              tagsStyles={{
+                                  p: {
+                                      color: ThemeManager.getCurrentThemeVariables().textColor,
+                                      fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase
+                                  },
+                                  div: {color: ThemeManager.getCurrentThemeVariables().textColor}
+                              }}
+                              onLinkPress={(event, link) => openWebLink(link)}/>
+                        : <View/>}
+                </Content>
+            </Container>
+        );
+    }
+}
--- a/screens/PlanningScreen.js
+++ b/screens/PlanningScreen.js
@ -1,18 +1,16 @@
 // @flow

 import * as React from 'react';
-import {BackHandler, Image, View} from 'react-native';
-import {Button, Content, H1, H3, Text} from 'native-base';
+import {BackHandler, Image} from 'react-native';
+import {H3, Text, View} from 'native-base';
 import i18n from "i18n-js";
 import ThemeManager from "../utils/ThemeManager";
 import {Linking} from "expo";
 import BaseContainer from "../components/BaseContainer";
 import {Agenda, LocaleConfig} from 'react-native-calendars';
-import HTML from 'react-native-render-html';
 import Touchable from 'react-native-platform-touchable';
-import {Modalize} from 'react-native-modalize';
 import WebDataManager from "../utils/WebDataManager";
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import PlanningEventManager from '../utils/PlanningEventManager';

 LocaleConfig.locales['fr'] = {
    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@ -28,7 +26,6 @@ type Props = {
 }

 type State = {
-    modalCurrentDisplayItem: Object,
    refreshing: boolean,
    agendaItems: Object,
    calendarShowing: boolean,
@ -51,7 +48,6 @@ function openWebLink(link) {
 */
 export default class PlanningScreen extends React.Component<Props, State> {

-    modalRef: Modalize;
    agendaRef: Agenda;
    webDataManager: WebDataManager;

@ -61,7 +57,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
    didFocusSubscription: Function;
    willBlurSubscription: Function;
    state = {
-        modalCurrentDisplayItem: {},
        refreshing: false,
        agendaItems: {},
        calendarShowing: false,
@ -69,7 +64,6 @@ export default class PlanningScreen extends React.Component<Props, State> {

    constructor(props: any) {
        super(props);
-        this.modalRef = React.createRef();
        this.webDataManager = new WebDataManager(FETCH_URL);
        this.didFocusSubscription = props.navigation.addListener(
            'didFocus',
@ -131,72 +125,11 @@ export default class PlanningScreen extends React.Component<Props, State> {
        return daysOfYear;
    }

-    getModalHeader() {
-        return (
-            <View style={{marginBottom: 0}}>
-                <Button
-                    onPress={() => this.modalRef.current.close()}
-                    style={{
-                        marginTop: 50,
-                        marginLeft: 'auto',
-                    }}
-                    transparent>
-                    <CustomMaterialIcon icon={'close'}/>
-                </Button>
-            </View>
-        );
-    }
-
-    getModalContent() {
-        return (
-            <View style={{
-                flex: 1,
-                padding: 20
-            }}>
-                <H1>
-                    {this.state.modalCurrentDisplayItem.title}
-                </H1>
-                <H3 style={{
-                    marginTop: 10,
-                    color: ThemeManager.getCurrentThemeVariables().listNoteColor
-                }}>
-                    {this.getFormattedTime(this.state.modalCurrentDisplayItem)}
-                </H3>
-                <Content>
-                    {this.state.modalCurrentDisplayItem.logo !== null ?
-                        <View style={{width: '100%', height: 200, marginTop: 20, marginBottom: 20}}>
-                            <Image style={{flex: 1, resizeMode: "contain"}}
-                                   source={{uri: this.state.modalCurrentDisplayItem.logo}}/>
-                        </View>
-                        : <View/>}
-
-                    {this.state.modalCurrentDisplayItem.description !== null ?
-                        // Surround description with div to allow text styling if the description is not html
-                        <HTML html={"<div>" + this.state.modalCurrentDisplayItem.description + "</div>"}
-                              tagsStyles={{
-                                  p: {
-                                      color: ThemeManager.getCurrentThemeVariables().textColor,
-                                      fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase
-                                  },
-                                  div: {color: ThemeManager.getCurrentThemeVariables().textColor}
-                              }}
-                              onLinkPress={(event, link) => openWebLink(link)}/>
-                        : <View/>}
-                </Content>
-            </View>
-        );
-    }
-
-    showItemDetails(item: Object) {
-        this.setState({
-            modalCurrentDisplayItem: item,
-        });
-        if (this.modalRef.current) {
-            this.modalRef.current.open();
-        }
-    }
-
    getRenderItem(item: Object) {
+        let navData = {
+            data: item
+        };
+        const nav = this.props.navigation;
        return (
            <Touchable
                style={{
@ -205,7 +138,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                    marginRight: 10,
                    marginTop: 17,
                }}
-                onPress={() => this.showItemDetails(item)}>
+                onPress={() => nav.navigate('PlanningDisplayScreen', navData)}>
                <View style={{
                    padding: 10,
                    flex: 1,
@ -219,7 +152,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                            marginTop: 5,
                            marginBottom: 10
                        }}>
-                            {this.getFormattedTime(item)}
+                            {PlanningEventManager.getFormattedTime(item)}
                        </Text>
                        <H3 style={{marginBottom: 10}}>{item.title}</H3>
                    </View>
@ -296,8 +229,8 @@ export default class PlanningScreen extends React.Component<Props, State> {
    generateEventAgenda(eventList: Array<Object>) {
        let agendaItems = this.generateEmptyCalendar();
        for (let i = 0; i < eventList.length; i++) {
-            if (agendaItems[this.getEventStartDate(eventList[i])] !== undefined) {
-                this.pushEventInOrder(agendaItems, eventList[i], this.getEventStartDate(eventList[i]));
+            if (agendaItems[PlanningEventManager.getEventStartDate(eventList[i])] !== undefined) {
+                this.pushEventInOrder(agendaItems, eventList[i], PlanningEventManager.getEventStartDate(eventList[i]));
            }
        }
        this.setState({agendaItems: agendaItems})
@ -308,7 +241,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
            agendaItems[startDate].push(event);
        else {
            for (let i = 0; i < agendaItems[startDate].length; i++) {
-                if (this.isEventBefore(event, agendaItems[startDate][i])) {
+                if (PlanningEventManager.isEventBefore(event, agendaItems[startDate][i])) {
                    agendaItems[startDate].splice(i, 0, event);
                    break;
                } else if (i === agendaItems[startDate].length - 1) {
@ -319,65 +252,10 @@ export default class PlanningScreen extends React.Component<Props, State> {
        }
    }

-    isEventBefore(event1: Object, event2: Object) {
-        let date1 = new Date();
-        let date2 = new Date();
-        let timeArray = this.getEventStartTime(event1).split(":");
-        date1.setHours(parseInt(timeArray[0]), parseInt(timeArray[1]));
-        timeArray = this.getEventStartTime(event2).split(":");
-        date2.setHours(parseInt(timeArray[0]), parseInt(timeArray[1]));
-        return date1 < date2;
-    }
-
-    getEventStartDate(event: Object) {
-        return event.date_begin.split(" ")[0];
-    }
-
-    getEventStartTime(event: Object) {
-        if (event !== undefined && Object.keys(event).length > 0 && event.date_begin !== null)
-            return this.formatTime(event.date_begin.split(" ")[1]);
-        else
-            return "";
-    }
-
-    getEventEndTime(event: Object) {
-        if (event !== undefined && Object.keys(event).length > 0 && event.date_end !== null)
-            return this.formatTime(event.date_end.split(" ")[1]);
-        else
-            return "";
-    }
-
-    getFormattedTime(event: Object) {
-        if (this.getEventEndTime(event) !== "")
-            return this.getEventStartTime(event) + " - " + this.getEventEndTime(event);
-        else
-            return this.getEventStartTime(event);
-    }
-
-    formatTime(time: string) {
-        let array = time.split(':');
-        return array[0] + ':' + array[1];
-    }
-
-    onModalClosed() {
-        this.setState({
-            modalCurrentDisplayItem: {},
-        });
-    }
-
    render() {
        const nav = this.props.navigation;
        return (
            <BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
-                <Modalize ref={this.modalRef}
-                          modalStyle={{
-                              backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
-                          }}
-                    // adjustToContentHeight // Breaks when displaying full screen, half, then full again
-                          HeaderComponent={() => this.getModalHeader()}
-                          onClosed={() => this.onModalClosed()}>
-                    {this.getModalContent()}
-                </Modalize>
                <Agenda
                    // the list of items that have to be displayed in agenda. If you want to render item as empty date
                    // the value of date key kas to be an empty array []. If there exists no value for date key it is
@ -431,14 +309,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
                        agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
                        agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
                        agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
-                        // Fix for days hiding behind knob
-                        'stylesheet.calendar.header': {
-                            week: {
-                                marginTop: 0,
-                                flexDirection: 'row',
-                                justifyContent: 'space-between'
-                            }
-                        }
                    }}
                />
            </BaseContainer>
--- a/translations/en.json
+++ b/translations/en.json
@ -2,6 +2,7 @@
  "screens": {
    "home": "Home",
    "planning": "Planning",
+    "planningDisplayScreen": "Event Details",
    "proxiwash": "Proxiwash",
    "proximo": "Proximo",
    "menuSelf": "RU Menu",
--- a/translations/fr.json
+++ b/translations/fr.json
@ -2,6 +2,7 @@
  "screens": {
    "home": "Accueil",
    "planning": "Planning",
+    "planningDisplayScreen": "Détails",
    "proxiwash": "Proxiwash",
    "proximo": "Proximo",
    "menuSelf": "Menu du RU",
--- a/utils/PlanningEventManager.js
+++ b/utils/PlanningEventManager.js
@ -0,0 +1,42 @@
+
+export default class PlanningEventManager {
+    static isEventBefore(event1: Object, event2: Object) {
+        let date1 = new Date();
+        let date2 = new Date();
+        let timeArray = this.getEventStartTime(event1).split(":");
+        date1.setHours(parseInt(timeArray[0]), parseInt(timeArray[1]));
+        timeArray = this.getEventStartTime(event2).split(":");
+        date2.setHours(parseInt(timeArray[0]), parseInt(timeArray[1]));
+        return date1 < date2;
+    }
+
+    static getEventStartDate(event: Object) {
+        return event.date_begin.split(" ")[0];
+    }
+
+    static getEventStartTime(event: Object) {
+        if (event !== undefined && Object.keys(event).length > 0 && event.date_begin !== null)
+            return this.formatTime(event.date_begin.split(" ")[1]);
+        else
+            return "";
+    }
+
+    static getEventEndTime(event: Object) {
+        if (event !== undefined && Object.keys(event).length > 0 && event.date_end !== null)
+            return this.formatTime(event.date_end.split(" ")[1]);
+        else
+            return "";
+    }
+
+    static getFormattedTime(event: Object) {
+        if (this.getEventEndTime(event) !== "")
+            return this.getEventStartTime(event) + " - " + this.getEventEndTime(event);
+        else
+            return this.getEventStartTime(event);
+    }
+
+    static formatTime(time: string) {
+        let array = time.split(':');
+        return array[0] + ':' + array[1];
+    }
+}