Greatly improved FlatList performance

components/Lists/ClubListItem.js

@@ -1,17 +1,17 @@
 // @flow
 
 import * as React from 'react';
-import {Avatar, List, withTheme} from 'react-native-paper';
+import {Avatar, Chip, List, withTheme} from 'react-native-paper';
 import {View} from "react-native";
 
 type Props = {
     onPress: Function,
     categoryTranslator: Function,
-    chipRender: Function,
     item: Object,
+    height: number,
 }
 
-class ClubListItem extends React.PureComponent<Props> {
+class ClubListItem extends React.Component<Props> {
 
     colors: Object;
     hasManagers: boolean;
@@ -22,12 +22,23 @@ class ClubListItem extends React.PureComponent<Props> {
         this.hasManagers = props.item.responsibles.length > 0;
     }
 
+    shouldComponentUpdate() {
+        return false;
+    }
+
     getCategoriesRender(categories: Array<number | null>) {
         let final = [];
         for (let i = 0; i < categories.length; i++) {
             if (categories[i] !== null){
                 const category = this.props.categoryTranslator(categories[i]);
-                final.push(this.props.chipRender(category, this.props.item.id + ':' + category.id));
+                final.push(
+                    <Chip
+                        style={{marginRight: 5, marginBottom: 5}}
+                        key={this.props.item.id + ':' + category.id}
+                    >
+                        {category.name}
+                    </Chip>
+                );
             }
         }
         return <View style={{flexDirection: 'row'}}>{final}</View>;
@@ -56,6 +67,10 @@ class ClubListItem extends React.PureComponent<Props> {
                     icon={this.hasManagers ? "check-circle-outline" : "alert-circle-outline"}
                     color={this.hasManagers ? this.colors.success : this.colors.primary}
                 />}
+                style={{
+                    height: this.props.height,
+                    justifyContent: 'center',
+                }}
             />
         );
     }

screens/Amicale/Clubs/ClubListScreen.js

@@ -20,6 +20,8 @@ type State = {
     currentSearchString: string,
 }
 
+const LIST_ITEM_HEIGHT = 96;
+
 class ClubListScreen extends React.Component<Props, State> {
 
     state = {
@@ -86,6 +88,8 @@ class ClubListScreen extends React.Component<Props, State> {
         return item.id.toString();
     };
 
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+
     getScreen = (data: Object) => {
         this.categories = data.categories;
         return (
@@ -95,6 +99,9 @@ class ClubListScreen extends React.Component<Props, State> {
                 keyExtractor={this.keyExtractor}
                 renderItem={this.getRenderItem}
                 ListHeaderComponent={this.getListHeader()}
+                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                removeClippedSubviews={true}
+                getItemLayout={this.itemLayout}
             />
         )
     };
@@ -163,9 +170,9 @@ class ClubListScreen extends React.Component<Props, State> {
             return (
                 <ClubListItem
                     categoryTranslator={this.getCategoryOfId}
-                    chipRender={this.getChipRender}
                     item={item}
                     onPress={onPress}
+                    height={LIST_ITEM_HEIGHT}
                 />
             );
         } else