Updated react navigation to v5

App.js

@@ -3,15 +3,17 @@
 import * as React from 'react';
 import {Platform, StatusBar} from 'react-native';
 import {Root, StyleProvider} from 'native-base';
-import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
 import LocaleManager from './utils/LocaleManager';
 import * as Font from 'expo-font';
 import {clearThemeCache} from 'native-base-shoutem-theme';
 import AsyncStorageManager from "./utils/AsyncStorageManager";
 import CustomIntroSlider from "./components/CustomIntroSlider";
-import {AppLoading} from 'expo';
+import {SplashScreen} from 'expo';
 import NotificationsManager from "./utils/NotificationsManager";
 import ThemeManager from './utils/ThemeManager';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import DrawerNavigator from './navigation/DrawerNavigator';
 
 type Props = {};
 
@@ -22,6 +24,8 @@ type State = {
     currentTheme: ?Object,
 };
 
+const Stack = createStackNavigator();
+
 export default class App extends React.Component<Props, State> {
 
     state = {
@@ -31,16 +35,9 @@ export default class App extends React.Component<Props, State> {
         currentTheme: null,
     };
 
-    onIntroDone: Function;
-    loadAssetsAsync: Function;
-    onLoadFinished: Function;
-
     constructor(props: Object) {
         super(props);
         LocaleManager.initTranslations();
-        this.onIntroDone = this.onIntroDone.bind(this);
-        this.loadAssetsAsync = this.loadAssetsAsync.bind(this);
-        this.onLoadFinished = this.onLoadFinished.bind(this);
     }
 
     /**
@@ -76,19 +73,29 @@ export default class App extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate5.key, '0');
     }
 
+    async componentDidMount() {
+        await this.loadAssetsAsync();
+    }
+
     async loadAssetsAsync() {
         // Wait for custom fonts to be loaded before showing the app
+        console.log("loading Fonts");
+        SplashScreen.preventAutoHide();
         await Font.loadAsync({
-            'Roboto': require('native-base/Fonts/Roboto.ttf'),
             'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
-            'material-community': require('native-base/Fonts/MaterialCommunityIcons.ttf'),
         });
+        console.log("loading preferences");
         await AsyncStorageManager.getInstance().loadPreferences();
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
+        console.log("loading Expo token");
         await NotificationsManager.initExpoToken();
+        console.log("loaded");
+        this.onLoadFinished();
     }
 
     onLoadFinished() {
+
+        console.log("finished");
         // Only show intro if this is the first time starting the app
         this.setState({
             isLoading: false,
@@ -97,33 +104,30 @@ export default class App extends React.Component<Props, State> {
             showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate5.current === '1'
         });
         // Status bar goes dark if set too fast
-        setTimeout(this.setupStatusBar,
+        setTimeout(this.setupStatusBar, 1000);
-            1000
+        SplashScreen.hide();
-        )
     }
 
     /**
      * Renders the app based on loading state
      */
     render() {
+        console.log("render");
         if (this.state.isLoading) {
-            return (
+            return null;
-                <AppLoading
+        } else if (this.state.showIntro || this.state.showUpdate) {
-                    startAsync={this.loadAssetsAsync}
-                    onFinish={this.onLoadFinished}
-                    onError={console.warn}
-                />
-            );
-        }
-        if (this.state.showIntro || this.state.showUpdate) {
             return <CustomIntroSlider onDone={this.onIntroDone}
                                       isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
         } else {
-            const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
+
             return (
                 <Root>
                     <StyleProvider style={this.state.currentTheme}>
-                        <AppNavigator/>
+                        <NavigationContainer>
+                            <Stack.Navigator headerMode="none">
+                                <Stack.Screen name="Root" component={DrawerNavigator} />
+                            </Stack.Navigator>
+                        </NavigationContainer>
                     </StyleProvider>
                 </Root>
             );

README.md

@@ -13,7 +13,7 @@ Ce dépot contient les source de cette application, modifiable par les étudiant
 
 Si vous voulez influencer le développement ? C'est très simple !
 
-Pas besoin de connaissance, il est possible d'aider simplement en proposant des améliorations ou en rapportant des bugs par mail (vergnet@etud.insa-toulouse.fr) ou sur [cette page](https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues), en vous connectant avec vos login INSA.
+Pas besoin de connaissance, il est possible d'aider simplement en proposant des améliorations ou en rapportant des bugs par mail (vergnet@etud.insa-toulouse.fr) ou sur [cette page](https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues), en vous connectant avec vos login INSA.
 
 Si vous avez assez de connaissances et vous souhaitez proposer des modification dans le code, installez l'application sur votre machine, réalisez votre modification et créez une 'pull request'.
 

app.json

@@ -10,7 +10,7 @@
       "android",
       "web"
     ],
-    "version": "1.5.0",
+    "version": "1.5.2",
     "orientation": "portrait",
     "primaryColor": "#be1522",
     "icon": "./assets/android.icon.png",
@@ -36,7 +36,7 @@
     },
     "android": {
       "package": "fr.amicaleinsat.application",
-      "versionCode": 13,
+      "versionCode": 15,
       "icon": "./assets/android.icon.png",
       "adaptiveIcon": {
         "foregroundImage": "./assets/android.adaptive-icon.png",

components/BaseContainer.js

@@ -4,11 +4,9 @@ import * as React from 'react';
 import {Container} from "native-base";
 import CustomHeader from "./CustomHeader";
 import CustomMaterialIcon from "./CustomMaterialIcon";
-import {Platform, StatusBar, View} from "react-native";
+import {Platform, View} from "react-native";
 import ThemeManager from "../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
-import {ScreenOrientation} from "expo";
-import {NavigationActions} from "react-navigation";
 
 
 type Props = {
@@ -39,81 +37,22 @@ export default class BaseContainer extends React.Component<Props, State> {
         hideHeaderOnLandscape: false,
         headerSubtitle: '',
     };
-    willBlurSubscription: function;
+
-    willFocusSubscription: function;
     state = {
         isHeaderVisible: true,
     };
 
     onDrawerPress: Function;
-    onWillFocus: Function;
-    onWillBlur: Function;
-    onChangeOrientation: Function;
 
     constructor() {
         super();
         this.onDrawerPress = this.onDrawerPress.bind(this);
-        this.onWillFocus = this.onWillFocus.bind(this);
-        this.onWillBlur = this.onWillBlur.bind(this);
-        this.onChangeOrientation = this.onChangeOrientation.bind(this);
     }
 
     onDrawerPress() {
         this.props.navigation.toggleDrawer();
     }
 
-    onWillFocus() {
-        if (this.props.enableRotation) {
-            ScreenOrientation.unlockAsync();
-            ScreenOrientation.addOrientationChangeListener(this.onChangeOrientation);
-        }
-    }
-
-    onWillBlur() {
-        if (this.props.enableRotation)
-            ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-    }
-
-    onChangeOrientation(OrientationChangeEvent) {
-        if (this.props.hideHeaderOnLandscape) {
-            let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
-                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
-                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
-            this.setState({isHeaderVisible: !isLandscape});
-            const setParamsAction = NavigationActions.setParams({
-                params: {showTabBar: !isLandscape},
-                key: this.props.navigation.state.key,
-            });
-            this.props.navigation.dispatch(setParamsAction);
-            StatusBar.setHidden(isLandscape);
-        }
-    }
-
-    /**
-     * Register for blur event to close side menu on screen change
-     */
-    componentDidMount() {
-        this.willFocusSubscription = this.props.navigation.addListener(
-            'willFocus',
-            this.onWillFocus
-        );
-        this.willBlurSubscription = this.props.navigation.addListener(
-            'willBlur',
-            this.onWillBlur
-        );
-    }
-
-    /**
-     * Unregister from event when un-mounting components
-     */
-    componentWillUnmount() {
-        if (this.willBlurSubscription !== undefined)
-            this.willBlurSubscription.remove();
-        if (this.willFocusSubscription !== undefined)
-            this.willFocusSubscription.remove();
-    }
-
-
     render() {
         // console.log("rendering BaseContainer");
         return (

components/FetchedDataSectionList.js

@@ -63,13 +63,6 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         this.renderItemNotEmpty = this.renderItem.bind(this, false);
     }
 
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-        return this.state.refreshing !== nextState.refreshing ||
-            nextState.firstLoading !== this.state.firstLoading ||
-            nextState.machinesWatched.length !== this.state.machinesWatched.length ||
-            nextState.fetchedData.len !== this.state.fetchedData.len;
-    }
-
 
     /**
      * Get the translation for the header in the current language

navigation/AppNavigator.js

@@ -1,14 +0,0 @@
-// @flow
-
-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(createDrawerNavigatorWithInitialRoute(initialRoute));
-}
-
-export {createAppContainerWithInitialRoute};

navigation/DrawerNavigator.js

@@ -1,7 +1,8 @@
 // @flow
 
-import { createDrawerNavigator } from 'react-navigation-drawer';
+import * as React from 'react';
-import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator';
+import {createDrawerNavigator} from '@react-navigation/drawer';
+import TabNavigator from './MainTabNavigator';
 import SettingsScreen from '../screens/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
@@ -15,65 +16,145 @@ 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";
+import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
 
-const AboutStack = createStackNavigator({
+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,
-        },
-    });
 
-
+function AboutStackComponent() {
-// Create a stack to use animations
+    return (
-function createDrawerStackWithInitialRoute(initialRoute: string) {
+        <AboutStack.Navigator
-    return createStackNavigator({
+            initialRouteName="AboutScreen"
-            Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
+            mode='card'
-            SettingsScreen: {screen: SettingsScreen},
+            headerMode="none"
-            AboutScreen: AboutStack,
+            screenOptions={{
-            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,
-            },
+            }}
-        });
+        >
+            <AboutStack.Screen
+                name="AboutScreen"
+                component={AboutScreen}
+            />
+            <AboutStack.Screen
+                name="AboutDependenciesScreen"
+                component={AboutDependenciesScreen}
+            />
+            <AboutStack.Screen
+                name="DebugScreen"
+                component={DebugScreen}
+            />
+        </AboutStack.Navigator>
+    );
 }
 
-/**
+const Drawer = createDrawerNavigator();
- * Creates the drawer navigation stack
+
- */
+function getDrawerContent(nav) {
-function createDrawerNavigatorWithInitialRoute(initialRoute: string) {
+    return <Sidebar navigation={nav}/>
-    return createDrawerNavigator({
-        Main: createDrawerStackWithInitialRoute(initialRoute),
-    }, {
-        contentComponent: Sidebar,
-        initialRouteName: 'Main',
-        backBehavior: 'initialRoute',
-        drawerType: 'front',
-        useNativeAnimations: true,
-    });
 }
 
-export {createDrawerNavigatorWithInitialRoute};
+export default function DrawerNavigator() {
+    return (
+        <Drawer.Navigator
+            initialRouteName={'Main'}
+            mode='card'
+            drawerContent={props => getDrawerContent(props.navigation)}
+            screenOptions={{
+                gestureEnabled: true,
+                cardOverlayEnabled: true,
+                ...TransitionPresets.SlideFromRightIOS,
+            }}
+        >
+            <Drawer.Screen
+                name="Main"
+                component={TabNavigator}
+            >
+            </Drawer.Screen>
+            <Drawer.Screen
+                name="SettingsScreen"
+                component={SettingsScreen}
+            />
+            <Drawer.Screen
+                name="AboutScreen"
+                component={AboutStackComponent}
+            />
+            <Drawer.Screen
+                name="SelfMenuScreen"
+                component={SelfMenuScreen}
+            />
+            <Drawer.Screen
+                name="TutorInsaScreen"
+                component={TutorInsaScreen}
+            />
+            <Drawer.Screen
+                name="AmicaleScreen"
+                component={AmicaleScreen}
+            />
+            <Drawer.Screen
+                name="WiketudScreen"
+                component={WiketudScreen}
+            />
+            <Drawer.Screen
+                name="ElusEtudScreen"
+                component={ElusEtudScreen}
+            />
+            <Drawer.Screen
+                name="BlueMindScreen"
+                component={BlueMindScreen}
+            />
+            <Drawer.Screen
+                name="EntScreen"
+                component={EntScreen}
+            />
+            <Drawer.Screen
+                name="AvailableRoomScreen"
+                component={AvailableRoomScreen}
+            />
+        </Drawer.Navigator>
+    );
+}
+//
+// // 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};

navigation/MainTabNavigator.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {createStackNavigator, TransitionPresets} from 'react-navigation-stack';
+import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
-import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
+import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
 
 import HomeScreen from '../screens/HomeScreen';
 import PlanningScreen from '../screens/PlanningScreen';
@@ -13,6 +13,11 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import ThemeManager from "../utils/ThemeManager";
+import AboutScreen from "../screens/About/AboutScreen";
+import AboutDependenciesScreen from "../screens/About/AboutDependenciesScreen";
+import DebugScreen from "../screens/DebugScreen";
+import SettingsScreen from "../screens/SettingsScreen";
+import AsyncStorageManager from "../utils/AsyncStorageManager";
 
 const TAB_ICONS = {
     Home: 'triangle',
@@ -22,106 +27,153 @@ const TAB_ICONS = {
     Planex: 'timetable',
 };
 
-const ProximoStack = createStackNavigator({
+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({
+function ProximoStackComponent() {
-        ProxiwashScreen: {screen: ProxiwashScreen},
+    return (
-        ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
+        <ProximoStack.Navigator
-    },
+            initialRouteName="ProximoMainScreen"
-    {
+            mode='card'
-        initialRouteName: "ProxiwashScreen",
+            headerMode="none"
-        mode: 'card',
+            screenOptions={{
-        headerMode: "none",
+                gestureEnabled: true,
-        defaultNavigationOptions: {
+                cardOverlayEnabled: true,
-            gestureEnabled: true,
+                ...TransitionPresets.SlideFromRightIOS,
-            cardOverlayEnabled: true,
+            }}
-            ...TransitionPresets.ModalSlideFromBottomIOS,
+        >
-        },
+            <ProximoStack.Screen
-    });
+                name="ProximoMainScreen"
-
+                component={ProximoMainScreen}
-const PlanningStack = createStackNavigator({
+            />
-        PlanningScreen: {screen: PlanningScreen},
+            <ProximoStack.Screen
-        PlanningDisplayScreen: {screen: PlanningDisplayScreen},
+                name="ProximoListScreen"
-    },
+                component={ProximoListScreen}
-    {
+            />
-        initialRouteName: "PlanningScreen",
+            <ProximoStack.Screen
-        mode: 'card',
+                name="ProximoAboutScreen"
-        headerMode: "none",
+                component={ProximoAboutScreen}
-        defaultNavigationOptions: {
+                options={{
-            gestureEnabled: true,
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
-            cardOverlayEnabled: true,
+                }}
-            ...TransitionPresets.ModalSlideFromBottomIOS,
+            />
-        },
+        </ProximoStack.Navigator>
-    });
+    );
-
-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: HomeStack,
-        Planning: PlanningStack,
-        Proxiwash: ProxiwashStack,
-        Proximo: ProximoStack,
-        Planex: {
-            screen: PlanexScreen,
-            navigationOptions: ({navigation}) => {
-                const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true;
-                return {
-                    tabBarVisible: showTabBar,
-                };
-            },
-        },
-    }, {
-        defaultNavigationOptions: ({navigation}) => ({
-            tabBarIcon: ({focused, tintColor}) => {
-                let icon = TAB_ICONS[navigation.state.routeName];
-                // tintColor is ignoring activeColor et inactiveColor for some reason
-                let color = focused ? "#f0edf6" : "#4e1108";
-                return <CustomMaterialIcon icon={icon} color={color}/>;
-            },
-            tabBarVisible: true,
-        }),
-        order: ['Proximo', 'Planning', 'Home', 'Proxiwash', 'Planex'],
-        initialRouteName: initialRoute,
-        activeColor: '#f0edf6',
-        inactiveColor: '#4e1108',
-        backBehavior: 'initialRoute',
-        barStyle: {backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary},
-    });
 }
 
+const ProxiwashStack = createStackNavigator();
 
-export {createMaterialBottomTabNavigatorWithInitialRoute};
+function ProxiwashStackComponent() {
+    return (
+        <ProxiwashStack.Navigator
+            initialRouteName="ProxiwashScreen"
+            mode='card'
+            headerMode="none"
+            screenOptions={{
+                gestureEnabled: true,
+                cardOverlayEnabled: true,
+                ...TransitionPresets.ModalSlideFromBottomIOS,
+            }}
+        >
+            <ProxiwashStack.Screen
+                name="ProxiwashScreen"
+                component={ProxiwashScreen}
+            />
+            <ProxiwashStack.Screen
+                name="ProxiwashAboutScreen"
+                component={ProxiwashAboutScreen}
+            />
+        </ProxiwashStack.Navigator>
+    );
+}
 
+const PlanningStack = createStackNavigator();
+
+function PlanningStackComponent() {
+    return (
+        <PlanningStack.Navigator
+            initialRouteName="PlanningScreen"
+            mode='card'
+            headerMode="none"
+            screenOptions={{
+                gestureEnabled: true,
+                cardOverlayEnabled: true,
+                ...TransitionPresets.ModalSlideFromBottomIOS,
+            }}
+        >
+            <PlanningStack.Screen
+                name="PlanningScreen"
+                component={PlanningScreen}
+            />
+            <PlanningStack.Screen
+                name="PlanningDisplayScreen"
+                component={PlanningDisplayScreen}
+            />
+        </PlanningStack.Navigator>
+    );
+}
+
+const HomeStack = createStackNavigator();
+
+function HomeStackComponent() {
+    return (
+        <HomeStack.Navigator
+            initialRouteName="HomeScreen"
+            mode='card'
+            headerMode="none"
+            screenOptions={{
+                gestureEnabled: true,
+                cardOverlayEnabled: true,
+                ...TransitionPresets.ModalSlideFromBottomIOS,
+            }}
+        >
+            <HomeStack.Screen
+                name="HomeScreen"
+                component={HomeScreen}
+            />
+            <HomeStack.Screen
+                name="PlanningDisplayScreen"
+                component={PlanningDisplayScreen}
+            />
+        </HomeStack.Navigator>
+    );
+}
+
+const Tab = createMaterialBottomTabNavigator();
+
+export default function TabNavigator() {
+    return (
+        <Tab.Navigator
+            initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen}
+            barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}}
+            screenOptions={({ route }) => ({
+                tabBarIcon: ({ focused, color, size }) => {
+                    let icon = TAB_ICONS[route.name];
+                    // tintColor is ignoring activeColor and inactiveColor for some reason
+                    color = focused ? "#f0edf6" : "#4e1108";
+                    return <CustomMaterialIcon icon={icon} color={color}/>;
+                },
+            })}
+        >
+            <Tab.Screen
+                name="Proximo"
+                component={ProximoStackComponent}
+            />
+            <Tab.Screen
+                name="Planning"
+                component={PlanningStackComponent}
+            />
+            <Tab.Screen
+                name="Home"
+                component={HomeStackComponent}
+            />
+            <Tab.Screen
+                name="Proxiwash"
+                component={ProxiwashStackComponent}
+            />
+            <Tab.Screen
+                name="Planex"
+                component={PlanexScreen}
+            />
+        </Tab.Navigator>
+    );
+}

package.json

@@ -9,11 +9,17 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/bottom-tabs": "^5.1.1",
+    "@react-navigation/drawer": "^5.1.1",
+    "@react-navigation/material-bottom-tabs": "^5.1.1",
+    "@react-navigation/native": "^5.0.9",
+    "@react-navigation/stack": "^5.1.1",
     "expo": "^36.0.0",
     "expo-font": "~8.0.0",
     "expo-linear-gradient": "~8.0.0",
     "expo-localization": "~8.0.0",
     "expo-permissions": "~8.0.0",
+    "expo-web-browser": "~8.0.0",
     "i18n-js": "^3.3.0",
     "native-base": "^2.12.1",
     "native-base-shoutem-theme": "^0.3.1",
@@ -33,12 +39,7 @@
     "react-native-safe-area-context": "0.6.0",
     "react-native-screens": "2.0.0-alpha.12",
     "react-native-status-bar-height": "^2.3.1",
-    "react-native-webview": "7.4.3",
+    "react-native-webview": "7.4.3"
-    "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": {
     "babel-preset-expo": "^8.0.0"

screens/About/AboutScreen.js

@@ -15,7 +15,7 @@ import ThemeManager from "../../utils/ThemeManager";
 const links = {
     appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
     playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
-    git: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
+    git: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
     bugsMail: 'mailto:vergnet@etud.insa-toulouse.fr?' +
         'subject=' +
         '[BUG] Application Amicale INSA Toulouse' +
@@ -25,9 +25,9 @@ const links = {
         'Nature du problème :\n\n\n' +
         'Étapes pour reproduire ce pb :\n\n\n\n' +
         'Stp corrige le pb, bien cordialement.',
-    bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
+    bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
-    changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
+    changelog: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
-    license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
+    license: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
     authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
         "subject=" +
         "Application Amicale INSA Toulouse" +
@@ -202,7 +202,7 @@ export default class AboutScreen extends React.Component<Props, State> {
             <Card>
                 <CardItem>
                     <Left>
-                        <Thumbnail square source={require('../../assets/icon.png')}/>
+                        <Thumbnail square source={require('../../assets/android.icon.png')}/>
                         <Body>
                             <H1>{appJson.expo.name}</H1>
                             <Text note>

screens/HomeScreen.js

@@ -14,7 +14,7 @@ import DashboardItem from "../components/DashboardItem";
 
 const ICON_AMICALE = require('../assets/amicale.png');
 const NAME_AMICALE = 'Amicale INSA Toulouse';
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json";
+const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json";
 
 const SECTIONS_ID = [
     'dashboard',

screens/PlanningScreen.js

@@ -232,7 +232,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                     this.setState({
                         refreshing: false,
                     });
-                    console.log(err);
+                    // console.log(err);
                 });
         }
     };

screens/Proximo/ProximoListScreen.js

@@ -78,7 +78,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     onSelectSortModePrice: Function;
     onSortMenuPress: Function;
     renderItem: Function;
-    onListItemPress: Function;
 
     constructor(props: any) {
         super(props);
@@ -91,7 +90,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
         this.onSortMenuPress = this.onSortMenuPress.bind(this);
         this.renderItem = this.renderItem.bind(this);
-        this.onListItemPress = this.onListItemPress.bind(this);
     }
 
     /**
@@ -318,9 +316,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     }
 
     renderItem({item}: Object) {
+        const onListItemPress = this.onListItemPress.bind(this, item);
         return (<ListItem
             thumbnail
-            onPress={this.onListItemPress}
+            onPress={onListItemPress}
         >
             <Left>
                 <Thumbnail square source={{uri: item.image}}/>

screens/Proximo/ProximoMainScreen.js

@@ -9,7 +9,7 @@ import FetchedDataSectionList from "../../components/FetchedDataSectionList";
 import ThemeManager from "../../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
 
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
+const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
 
 
 /**
@@ -28,7 +28,21 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
     }
 
     static sortFinalData(a: Object, b: Object) {
-        return a.type.id - b.type.id;
+        let str1 = a.type.name.toLowerCase();
+        let str2 = b.type.name.toLowerCase();
+
+        // Make 'All' category with id -1 stick to the top
+        if (a.type.id === -1)
+            return -1;
+        if (b.type.id === -1)
+            return 1;
+
+        // Sort others by name ascending
+        if (str1 < str2)
+            return -1;
+        if (str1 > str2)
+            return 1;
+        return 0;
     }
 
     getHeaderTranslation() {
@@ -68,7 +82,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
             let articles = fetchedData.articles;
             finalData.push({
                 type: {
-                    id: "0",
+                    id: -1,
                     name: i18n.t('proximoScreen.all'),
                     icon: 'star'
                 },

screens/Proxiwash/ProxiwashScreen.js

@@ -13,7 +13,7 @@ import Touchable from "react-native-platform-touchable";
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
 import * as Expo from "expo";
 
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
+const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
 
 const MACHINE_STATES = {
     "TERMINE": "0",

screens/SelfMenuScreen.js

@@ -7,7 +7,7 @@ import ThemeManager from "../utils/ThemeManager";
 import i18n from "i18n-js";
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
 
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
+const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
 
 /**
  * Class defining the app's menu screen.

screens/Websites/AmicaleScreen.js

@@ -8,7 +8,7 @@ type Props = {
 }
 
 
-const URL = 'https://www.etud.insa-toulouse.fr/~amicale';
+const URL = 'https://amicale-insat.fr/';
 
 /**
  * Class defining the app's planex screen.

screens/Websites/AvailableRoomScreen.js

@@ -12,8 +12,8 @@ type Props = {
 const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php';
 const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
 const BIB_URL = 'https://bibbox.insa-toulouse.fr/';
-const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
+const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
-const CUSTOM_CSS_Bib = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
+const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
 
 /**
  * Class defining the app's planex screen.

screens/Websites/BlueMindScreen.js

@@ -11,7 +11,7 @@ type Props = {
 
 const URL = 'https://etud-mel.insa-toulouse.fr/webmail/';
 
-const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/bluemind/customMobile.css';
+const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/bluemind/customMobile.css';
 
 
 /**

screens/Websites/ElusEtudScreen.js

@@ -8,7 +8,7 @@ type Props = {
 }
 
 
-const URL = 'https://srv-falcon.etud.insa-toulouse.fr/~eeinsat/';
+const URL = 'https://etud.insa-toulouse.fr/~eeinsat/';
 
 /**
  * Class defining the app's planex screen.

screens/Websites/EntScreen.js

@@ -11,12 +11,12 @@ type Props = {
 
 const URL = 'https://ent.insa-toulouse.fr/';
 
-const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/ent/customMobile.css';
+const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/ent/customMobile.css';
 
 // let stylesheet = document.createElement('link');
 // stylesheet.type = 'text/css';
 // stylesheet.rel = 'stylesheet';
-// stylesheet.href = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/ent/customMobile.css';
+// stylesheet.href = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/ent/customMobile.css';
 // let mobileSpec = document.createElement('meta');
 // mobileSpec.name = 'viewport';
 // mobileSpec.content = 'width=device-width, initial-scale=1.0';

screens/Websites/PlanexScreen.js

@@ -11,8 +11,8 @@ type Props = {
 
 const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
 
-const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile3.css';
+const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile3.css';
-const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
+const CUSTOM_CSS_NIGHTMODE = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
 
 // // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
 // // Remove alpha from given Jquery node

screens/Websites/WiketudScreen.js

@@ -8,7 +8,7 @@ type Props = {
 }
 
 
-const URL = 'https://www.etud.insa-toulouse.fr/wiketud';
+const URL = 'https://wiki.etud.insa-toulouse.fr/';
 
 /**
  * Class defining the app's planex screen.

utils/NotificationsManager.js

@@ -6,7 +6,7 @@ import AsyncStorageManager from "./AsyncStorageManager";
 import LocaleManager from "./LocaleManager";
 import passwords from "../passwords";
 
-const EXPO_TOKEN_SERVER = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/expo_notifications/save_token.php';
+const EXPO_TOKEN_SERVER = 'https://etud.insa-toulouse.fr/~amicale_app/expo_notifications/save_token.php';
 
 /**
  * Static class used to manage notifications sent to the user
@@ -123,18 +123,8 @@ export default class NotificationsManager {
                     'Content-Type': 'application/json',
                 }),
                 body: JSON.stringify(data) // <-- Post parameters
-            })
+            });
-                .then((response) => response.json())
-                .then((responseJson) => {
-                    callback(responseJson);
-                })
-                .catch((error) => {
-                    console.log(error);
-                });
-        } else {
-            console.log('Expo token not available');
         }
-
     }
 
     /**
@@ -161,16 +151,7 @@ export default class NotificationsManager {
                     'Content-Type': 'application/json',
                 }),
                 body: JSON.stringify(data) // <-- Post parameters
-            })
+            });
-                .then((response) => response.text())
-                .then((responseText) => {
-                    console.log(responseText);
-                })
-                .catch((error) => {
-                    console.log(error);
-                });
-        } else {
-            console.log('Expo token not available');
         }
     }
 
@@ -194,16 +175,7 @@ export default class NotificationsManager {
                     'Content-Type': 'application/json',
                 }),
                 body: JSON.stringify(data) // <-- Post parameters
-            })
+            });
-                .then((response) => response.text())
-                .then((responseText) => {
-                    console.log(responseText);
-                })
-                .catch((error) => {
-                    console.log(error);
-                });
-        } else {
-            console.log('Expo token not available');
         }
     }
 }

utils/WebDataManager.js

@@ -25,8 +25,8 @@ export default class WebDataManager {
             let response = await fetch(this.FETCH_URL);
             fetchedData = await response.json();
         } catch (error) {
-            console.log('Could not read FetchedData from server');
+            // console.log('Could not read FetchedData from server');
-            console.log(error);
+            // console.log(error);
             throw new Error('Could not read FetchedData from server');
         }
         this.lastDataFetched = fetchedData;