Improved performance and used paper drawer items instead of navigation drawer items

components/Lists/ProximoListItem.js

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

components/Sidebar/Sidebar.js

@@ -4,13 +4,12 @@ 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 SidebarDivider from "./SidebarDivider";
+import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
-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,
@@ -21,16 +20,16 @@ type Props = {
 type State = {
     isLoggedIn: boolean,
     dialogVisible: boolean,
+    activeRoute: string;
 };
 
 /**
  * Component used to render the drawer menu content
  */
-class SideBar extends React.PureComponent<Props, State> {
+class SideBar extends React.Component<Props, State> {
 
     dataSet: Array<Object>;
 
-    getRenderItem: Function;
     colors: Object;
 
     /**
@@ -151,12 +150,12 @@ class SideBar extends React.PureComponent<Props, State> {
                 icon: "information",
             },
         ];
-        this.getRenderItem = this.getRenderItem.bind(this);
         this.colors = props.theme.colors;
         ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
         this.state = {
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
+            activeRoute: 'Main',
         };
     }
 
@@ -180,8 +179,10 @@ class SideBar extends React.PureComponent<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});
+        }
     }
 
     /**
@@ -200,7 +201,7 @@ class SideBar extends React.PureComponent<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;
@@ -209,20 +210,31 @@ class SideBar extends React.PureComponent<Props, State> {
             return null;
         else if (item.icon !== undefined) {
             return (
-                <SidebarItem
+                <Drawer.Item
-                    title={item.name}
+                    label={item.name}
+                    active={this.state.activeRoute === item.route}
                     icon={item.icon}
                     onPress={onListItemPress}
-                    shouldEmphasis={shouldEmphasis}
+                    style={{
+                        height: LIST_ITEM_HEIGHT,
+                        justifyContent: 'center',
+                    }}
                 />
             );
         } else {
             return (
-                <SidebarDivider title={item.name}/>
+                <Drawer.Item
+                    label={item.name}
+                    style={{
+                        height: LIST_ITEM_HEIGHT,
+                        justifyContent: 'center',
+                    }}
+                />
             );
         }
+    };
 
-    }
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
 
     render() {
         const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
@@ -239,9 +251,11 @@ class SideBar extends React.PureComponent<Props, State> {
                 {/*$FlowFixMe*/}
                 <FlatList
                     data={this.dataSet}
-                    extraData={this.state.isLoggedIn}
+                    extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
                     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

@@ -1,29 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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/Proximo/ProximoListScreen.js

@@ -32,6 +32,8 @@ function sortNameReverse(a, b) {
     return 0;
 }
 
+const LIST_ITEM_HEIGHT = 84;
+
 type Props = {
     navigation: Object,
     route: Object,
@@ -299,6 +301,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                     item={item}
                     onPress={onPress}
                     color={color}
+                    height={LIST_ITEM_HEIGHT}
                 />
             );
         } else
@@ -324,6 +327,8 @@ 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={{
@@ -338,6 +343,10 @@ 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>
         );