Listen for route change to update sidebar

components/Sidebar/Sidebar.js

@@ -151,7 +151,8 @@ class SideBar extends React.Component<Props, State> {
             },
         ];
         this.colors = props.theme.colors;
-        ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
+        ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
+        this.props.navigation.addListener('state', this.onRouteChange);
         this.state = {
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
@@ -159,14 +160,27 @@ class SideBar extends React.Component<Props, State> {
         };
     }
 
+    onRouteChange = (event) => {
+        if (event.data.state.routes !== undefined) {
+            const route = event.data.state.routes[0]; // get the current route (ROOT)
+            if (route.state !== undefined) {
+                const state = route.state; // Get the Drawer's state if it exists
+                // Get the current route name. This will only show Drawer routes.
+                // Tab routes will be shown as 'Main'
+                const routeName = state.routeNames[state.index];
+                if (this.state.activeRoute !== routeName)
+                    this.setState({activeRoute: routeName});
+            }
+
+        }
+    };
+
     showDisconnectDialog = () => this.setState({dialogVisible: true});
 
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
 
 
-    onLoginStateChange(isLoggedIn: boolean) {
+    onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
-        this.setState({isLoggedIn: isLoggedIn});
-    }
 
     /**
      * Callback when a drawer item is pressed.
@@ -179,10 +193,8 @@ class SideBar extends React.Component<Props, State> {
             openBrowser(item.link, this.colors.primary);
         else if (item.action !== undefined)
             item.action();
-        else {
+        else
             this.props.navigation.navigate(item.route);
-            this.setState({activeRoute: item.route});
-        }
     }
 
     /**

screens/HomeScreen.js

@@ -37,10 +37,6 @@ type Props = {
  */
 class HomeScreen extends React.Component<Props> {
 
-    onProxiwashClick: Function;
-    onTutorInsaClick: Function;
-    onMenuClick: Function;
-    onProximoClick: Function;
     getRenderItem: Function;
     createDataset: Function;
 
@@ -50,10 +46,6 @@ class HomeScreen extends React.Component<Props> {
 
     constructor(props) {
         super(props);
-        this.onProxiwashClick = this.onProxiwashClick.bind(this);
-        this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
-        this.onMenuClick = this.onMenuClick.bind(this);
-        this.onProximoClick = this.onProximoClick.bind(this);
         this.getRenderItem = this.getRenderItem.bind(this);
         this.createDataset = this.createDataset.bind(this);
         this.colors = props.theme.colors;
@@ -101,21 +93,13 @@ class HomeScreen extends React.Component<Props> {
         />;
     };
 
-    onProxiwashClick() {
+    onProxiwashClick = () => this.props.navigation.navigate('Proxiwash');
-        this.props.navigation.navigate('Proxiwash');
-    }
 
-    onTutorInsaClick() {
+    onTutorInsaClick = () => openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
-        openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
-    }
 
-    onProximoClick() {
+    onProximoClick = () => this.props.navigation.navigate('Proximo');
-        this.props.navigation.navigate('Proximo');
-    }
 
-    onMenuClick() {
+    onMenuClick = () => this.props.navigation.navigate('SelfMenuScreen');
-        this.props.navigation.navigate('SelfMenuScreen');
-    }
 
     /**
      * Creates the dataset to be used in the FlatList