Further FlatList performance improvements

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
     }
 });
 

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}

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

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}
             />
         );
     }