components/Lists/ProximoListItem.js

@@ -8,10 +8,9 @@ type Props = {
     onPress: Function,
     color: string,
     item: Object,
-    height: number,
 }
 
-class ProximoListItem extends React.Component<Props> {
+class ProximoListItem extends React.PureComponent<Props> {
 
     colors: Object;
 
@@ -20,10 +19,6 @@ class ProximoListItem extends React.Component<Props> {
         this.colors = props.theme.colors;
     }
 
-    shouldComponentUpdate() {
-        return false;
-    }
-
     render() {
         return (
             <List.Item
@@ -37,10 +32,6 @@ class ProximoListItem extends React.Component<Props> {
                     <Text style={{fontWeight: "bold"}}>
                         {this.props.item.price}€
                     </Text>}
-                style={{
-                    height: this.props.height,
-                    justifyContent: 'center',
-                }}
             />
         );
     }

components/Sidebar/Sidebar.js

@@ -4,12 +4,13 @@ import * as React from 'react';
 import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
 import i18n from "i18n-js";
 import {openBrowser} from "../../utils/WebBrowser";
-import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
+import SidebarDivider from "./SidebarDivider";
+import SidebarItem from "./SidebarItem";
+import {TouchableRipple, withTheme} from "react-native-paper";
 import ConnectionManager from "../../managers/ConnectionManager";
 import LogoutDialog from "../Amicale/LogoutDialog";
 
 const deviceWidth = Dimensions.get("window").width;
-const LIST_ITEM_HEIGHT = 48;
 
 type Props = {
     navigation: Object,
@@ -20,16 +21,16 @@ type Props = {
 type State = {
     isLoggedIn: boolean,
     dialogVisible: boolean,
-    activeRoute: string;
 };
 
 /**
  * Component used to render the drawer menu content
  */
-class SideBar extends React.Component<Props, State> {
+class SideBar extends React.PureComponent<Props, State> {
 
     dataSet: Array<Object>;
 
+    getRenderItem: Function;
     colors: Object;
 
     /**
@@ -150,37 +151,23 @@ class SideBar extends React.Component<Props, State> {
                 icon: "information",
             },
         ];
+        this.getRenderItem = this.getRenderItem.bind(this);
         this.colors = props.theme.colors;
-        ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
-        this.props.navigation.addListener('state', this.onRouteChange);
+        ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
         this.state = {
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
-            activeRoute: 'Main',
         };
     }
 
-    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) => this.setState({isLoggedIn: isLoggedIn});
+    onLoginStateChange(isLoggedIn: boolean) {
+        this.setState({isLoggedIn: isLoggedIn});
+    }
 
     /**
      * Callback when a drawer item is pressed.
@@ -213,7 +200,7 @@ class SideBar extends React.Component<Props, State> {
      * @param item The item to render
      * @return {*}
      */
-    getRenderItem = ({item}: Object) => {
+    getRenderItem({item}: Object) {
         const onListItemPress = this.onListItemPress.bind(this, item);
         const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
         const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
@@ -222,31 +209,20 @@ class SideBar extends React.Component<Props, State> {
             return null;
         else if (item.icon !== undefined) {
             return (
-                <Drawer.Item
-                    label={item.name}
-                    active={this.state.activeRoute === item.route}
+                <SidebarItem
+                    title={item.name}
                     icon={item.icon}
                     onPress={onListItemPress}
-                    style={{
-                        height: LIST_ITEM_HEIGHT,
-                        justifyContent: 'center',
-                    }}
+                    shouldEmphasis={shouldEmphasis}
                 />
             );
         } else {
             return (
-                <Drawer.Item
-                    label={item.name}
-                    style={{
-                        height: LIST_ITEM_HEIGHT,
-                        justifyContent: 'center',
-                    }}
-                />
+                <SidebarDivider title={item.name}/>
             );
         }
-    };
 
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+    }
 
     render() {
         const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
@@ -263,11 +239,9 @@ class SideBar extends React.Component<Props, State> {
                 {/*$FlowFixMe*/}
                 <FlatList
                     data={this.dataSet}
-                    extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
+                    extraData={this.state.isLoggedIn}
                     keyExtractor={this.listKeyExtractor}
                     renderItem={this.getRenderItem}
-                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                    getItemLayout={this.itemLayout}
                 />
                 <LogoutDialog
                     {...this.props}

components/Sidebar/SidebarDivider.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {withTheme} from 'react-native-paper';
+import {DrawerItem} from "@react-navigation/drawer";
+
+/**
+ * Component used to render a drawer menu item divider
+ *
+ * @param props Props to pass to the component
+ * @return {*}
+ */
+function SidebarDivider(props) {
+    const {colors} = props.theme;
+    return (
+        <DrawerItem
+            label={props.title}
+            focused={false}
+            onPress={undefined}
+            style={{
+                marginLeft: 0,
+                marginRight: 0,
+                padding: 0,
+                borderRadius: 0,
+                backgroundColor: colors.dividerBackground
+            }}
+        />
+    );
+}
+
+export default withTheme(SidebarDivider);

components/Sidebar/SidebarItem.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {withTheme} from 'react-native-paper';
+import {DrawerItem} from "@react-navigation/drawer";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+/**
+ * Component used to render a drawer menu item
+ *
+ * @param props Props to pass to the component
+ * @return {*}
+ */
+function SidebarItem(props) {
+    const {colors} = props.theme;
+    return (
+        <DrawerItem
+            label={props.title}
+            focused={false}
+            onPress={props.onPress}
+            icon={({color, size}) =>
+                <MaterialCommunityIcons color={props.shouldEmphasis ? colors.primary : color} size={size} name={props.icon}/>}
+            style={{
+                marginLeft: 0,
+                marginRight: 0,
+                padding: 0,
+                borderRadius: 0,
+            }}
+            labelStyle={{
+                color: colors.text,
+            }}
+        />
+    );
+}
+
+export default withTheme(SidebarItem);

screens/HomeScreen.js

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

screens/Proximo/ProximoListScreen.js

@@ -32,8 +32,6 @@ function sortNameReverse(a, b) {
     return 0;
 }
 
-const LIST_ITEM_HEIGHT = 84;
-
 type Props = {
     navigation: Object,
     route: Object,
@@ -301,7 +299,6 @@ class ProximoListScreen extends React.Component<Props, State> {
                     item={item}
                     onPress={onPress}
                     color={color}
-                    height={LIST_ITEM_HEIGHT}
                 />
             );
         } else
@@ -327,8 +324,6 @@ class ProximoListScreen extends React.Component<Props, State> {
         this.modalRef = ref;
     };
 
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
-
     render() {
         return (
             <View style={{
@@ -343,10 +338,6 @@ class ProximoListScreen extends React.Component<Props, State> {
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
                     keyExtractor={this.keyExtractor}
                     renderItem={this.renderItem}
-                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                    removeClippedSubviews={true}
-                    getItemLayout={this.itemLayout}
-                    initialNumToRender={10}
                 />
             </View>
         );