Browse Source

Greatly improved FlatList performance

Arnaud Vergnet 4 years ago
parent
commit
7554fb2854
2 changed files with 27 additions and 5 deletions
  1. 19
    4
      components/Lists/ClubListItem.js
  2. 8
    1
      screens/Amicale/Clubs/ClubListScreen.js

+ 19
- 4
components/Lists/ClubListItem.js View File

@@ -1,17 +1,17 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Avatar, List, withTheme} from 'react-native-paper';
4
+import {Avatar, Chip, List, withTheme} from 'react-native-paper';
5 5
 import {View} from "react-native";
6 6
 
7 7
 type Props = {
8 8
     onPress: Function,
9 9
     categoryTranslator: Function,
10
-    chipRender: Function,
11 10
     item: Object,
11
+    height: number,
12 12
 }
13 13
 
14
-class ClubListItem extends React.PureComponent<Props> {
14
+class ClubListItem extends React.Component<Props> {
15 15
 
16 16
     colors: Object;
17 17
     hasManagers: boolean;
@@ -22,12 +22,23 @@ class ClubListItem extends React.PureComponent<Props> {
22 22
         this.hasManagers = props.item.responsibles.length > 0;
23 23
     }
24 24
 
25
+    shouldComponentUpdate() {
26
+        return false;
27
+    }
28
+
25 29
     getCategoriesRender(categories: Array<number | null>) {
26 30
         let final = [];
27 31
         for (let i = 0; i < categories.length; i++) {
28 32
             if (categories[i] !== null){
29 33
                 const category = this.props.categoryTranslator(categories[i]);
30
-                final.push(this.props.chipRender(category, this.props.item.id + ':' + category.id));
34
+                final.push(
35
+                    <Chip
36
+                        style={{marginRight: 5, marginBottom: 5}}
37
+                        key={this.props.item.id + ':' + category.id}
38
+                    >
39
+                        {category.name}
40
+                    </Chip>
41
+                );
31 42
             }
32 43
         }
33 44
         return <View style={{flexDirection: 'row'}}>{final}</View>;
@@ -56,6 +67,10 @@ class ClubListItem extends React.PureComponent<Props> {
56 67
                     icon={this.hasManagers ? "check-circle-outline" : "alert-circle-outline"}
57 68
                     color={this.hasManagers ? this.colors.success : this.colors.primary}
58 69
                 />}
70
+                style={{
71
+                    height: this.props.height,
72
+                    justifyContent: 'center',
73
+                }}
59 74
             />
60 75
         );
61 76
     }

+ 8
- 1
screens/Amicale/Clubs/ClubListScreen.js View File

@@ -20,6 +20,8 @@ type State = {
20 20
     currentSearchString: string,
21 21
 }
22 22
 
23
+const LIST_ITEM_HEIGHT = 96;
24
+
23 25
 class ClubListScreen extends React.Component<Props, State> {
24 26
 
25 27
     state = {
@@ -86,6 +88,8 @@ class ClubListScreen extends React.Component<Props, State> {
86 88
         return item.id.toString();
87 89
     };
88 90
 
91
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
92
+
89 93
     getScreen = (data: Object) => {
90 94
         this.categories = data.categories;
91 95
         return (
@@ -95,6 +99,9 @@ class ClubListScreen extends React.Component<Props, State> {
95 99
                 keyExtractor={this.keyExtractor}
96 100
                 renderItem={this.getRenderItem}
97 101
                 ListHeaderComponent={this.getListHeader()}
102
+                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
103
+                removeClippedSubviews={true}
104
+                getItemLayout={this.itemLayout}
98 105
             />
99 106
         )
100 107
     };
@@ -163,9 +170,9 @@ class ClubListScreen extends React.Component<Props, State> {
163 170
             return (
164 171
                 <ClubListItem
165 172
                     categoryTranslator={this.getCategoryOfId}
166
-                    chipRender={this.getChipRender}
167 173
                     item={item}
168 174
                     onPress={onPress}
175
+                    height={LIST_ITEM_HEIGHT}
169 176
                 />
170 177
             );
171 178
         } else

Loading…
Cancel
Save