Browse Source

Improved proximo list performance by using a pure component

keplyx 4 years ago
parent
commit
651435dfc6
2 changed files with 19 additions and 3 deletions
  1. 17
    0
      components/PureFlatList.js
  2. 2
    3
      screens/Proximo/ProximoListScreen.js

+ 17
- 0
components/PureFlatList.js View File

@@ -0,0 +1,17 @@
1
+import * as React from 'react';
2
+import {FlatList} from "react-native";
3
+
4
+
5
+export default class PureFlatList extends React.PureComponent<Props>{
6
+
7
+    render() {
8
+        return (
9
+            <FlatList
10
+                data={this.props.data}
11
+                keyExtractor={this.props.keyExtractor}
12
+                style={{minHeight: 300, width: '100%'}}
13
+                renderItem={this.props.renderItem}
14
+            />
15
+        );
16
+    }
17
+}

+ 2
- 3
screens/Proximo/ProximoListScreen.js View File

@@ -5,6 +5,7 @@ import {FlatList, Image, ScrollView, View} from "react-native";
5 5
 import i18n from "i18n-js";
6 6
 import CustomModal from "../../components/CustomModal";
7 7
 import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
8
+import PureFlatList from "../../components/PureFlatList";
8 9
 
9 10
 function sortPrice(a, b) {
10 11
     return a.price - b.price;
@@ -313,11 +314,9 @@ class ProximoListScreen extends React.Component<Props, State> {
313 314
                 <CustomModal onRef={this.onModalRef}>
314 315
                     {this.state.modalCurrentDisplayItem}
315 316
                 </CustomModal>
316
-                <FlatList
317
+                <PureFlatList
317 318
                     data={this.state.currentlyDisplayedData}
318
-                    extraData={this.state.currentlyDisplayedData}
319 319
                     keyExtractor={this.keyExtractor}
320
-                    style={{minHeight: 300, width: '100%'}}
321 320
                     renderItem={this.renderItem}
322 321
                 />
323 322
             </View>

Loading…
Cancel
Save