From 04793d057effa2c51c5b8bce28803678df30207e Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Sun, 5 Apr 2020 21:06:00 +0200
Subject: [PATCH] Further FlatList performance improvements

---
 components/Lists/ProxiwashListItem.js | 3 ++-
 components/Lists/WebSectionList.js    | 5 +++++
 screens/Proximo/ProximoMainScreen.js  | 5 +++++
 screens/Proxiwash/ProxiwashScreen.js  | 2 ++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/Lists/ProxiwashListItem.js b/components/Lists/ProxiwashListItem.js
index e243f5d..0c79f58 100644
--- a/components/Lists/ProxiwashListItem.js
+++ b/components/Lists/ProxiwashListItem.js
@@ -36,6 +36,8 @@ function ProxiwashListItem(props) {
         <Card
             style={{
                 margin: 5,
+                height: props.height,
+                justifyContent: 'center',
             }}
             onPress={props.onPress}
         >
@@ -99,7 +101,6 @@ const styles = StyleSheet.create({
     },
     title: {
         backgroundColor: 'transparent',
-        height: 64
     }
 });
 
diff --git a/components/Lists/WebSectionList.js b/components/Lists/WebSectionList.js
index 779d661..84afe32 100644
--- a/components/Lists/WebSectionList.js
+++ b/components/Lists/WebSectionList.js
@@ -18,6 +18,7 @@ type Props = {
     stickyHeader: boolean,
     createDataset: Function,
     updateData: number,
+    itemHeight: number,
 }
 
 type State = {
@@ -41,6 +42,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         renderSectionHeader: null,
         stickyHeader: false,
         updateData: 0,
+        itemHeight: undefined,
     };
 
     refreshInterval: IntervalID;
@@ -162,6 +164,8 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
      */
     hideSnackBar = () => this.setState({snackbarVisible: false});
 
+    itemLayout = (data, index) => ({length: this.props.itemHeight, offset: this.props.itemHeight * index, index});
+
     render() {
         let dataset = [];
         if (this.state.fetchedData !== undefined)
@@ -193,6 +197,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
                             icon={"access-point-network-off"}
                             onRefresh={this.onRefresh}/>
                     }
+                    getItemLayout={this.props.itemHeight !== undefined ? this.itemLayout : undefined}
                 />
                 <Snackbar
                     visible={this.state.snackbarVisible}
diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js
index c816cd5..c1b8ebd 100644
--- a/screens/Proximo/ProximoMainScreen.js
+++ b/screens/Proximo/ProximoMainScreen.js
@@ -8,6 +8,7 @@ import {List, withTheme} from 'react-native-paper';
 import HeaderButton from "../../components/Custom/HeaderButton";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
+const LIST_ITEM_HEIGHT = 84;
 
 type Props = {
     navigation: Object,
@@ -223,6 +224,10 @@ class ProximoMainScreen extends React.Component<Props, State> {
                         icon={item.type.icon}
                         color={this.colors.primary}/>}
                     right={props => <List.Icon {...props} icon={'chevron-right'}/>}
+                    style={{
+                        height: LIST_ITEM_HEIGHT,
+                        justifyContent: 'center',
+                    }}
                 />
             );
         } else
diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js
index f88b46a..997ec47 100644
--- a/screens/Proxiwash/ProxiwashScreen.js
+++ b/screens/Proxiwash/ProxiwashScreen.js
@@ -21,6 +21,7 @@ let modalStateStrings = {};
 let stateIcons = {};
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
+const LIST_ITEM_HEIGHT = 64;
 
 type Props = {
     navigation: Object,
@@ -486,6 +487,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
                 isDryer={isDryer}
                 statusText={stateStrings[ProxiwashConstants.machineStates[item.state]]}
                 statusIcon={stateIcons[ProxiwashConstants.machineStates[item.state]]}
+                height={LIST_ITEM_HEIGHT}
             />
         );
     }