forked from vergnet/application-amicale
Improved proximo list performance by using a pure component
This commit is contained in:
parent
a10d357d8f
commit
651435dfc6
2 changed files with 19 additions and 3 deletions
17
components/PureFlatList.js
Normal file
17
components/PureFlatList.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import {FlatList} from "react-native";
|
||||||
|
|
||||||
|
|
||||||
|
export default class PureFlatList extends React.PureComponent<Props>{
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<FlatList
|
||||||
|
data={this.props.data}
|
||||||
|
keyExtractor={this.props.keyExtractor}
|
||||||
|
style={{minHeight: 300, width: '100%'}}
|
||||||
|
renderItem={this.props.renderItem}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -5,6 +5,7 @@ import {FlatList, Image, ScrollView, View} from "react-native";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import CustomModal from "../../components/CustomModal";
|
import CustomModal from "../../components/CustomModal";
|
||||||
import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
||||||
|
import PureFlatList from "../../components/PureFlatList";
|
||||||
|
|
||||||
function sortPrice(a, b) {
|
function sortPrice(a, b) {
|
||||||
return a.price - b.price;
|
return a.price - b.price;
|
||||||
|
@ -313,11 +314,9 @@ class ProximoListScreen extends React.Component<Props, State> {
|
||||||
<CustomModal onRef={this.onModalRef}>
|
<CustomModal onRef={this.onModalRef}>
|
||||||
{this.state.modalCurrentDisplayItem}
|
{this.state.modalCurrentDisplayItem}
|
||||||
</CustomModal>
|
</CustomModal>
|
||||||
<FlatList
|
<PureFlatList
|
||||||
data={this.state.currentlyDisplayedData}
|
data={this.state.currentlyDisplayedData}
|
||||||
extraData={this.state.currentlyDisplayedData}
|
|
||||||
keyExtractor={this.keyExtractor}
|
keyExtractor={this.keyExtractor}
|
||||||
style={{minHeight: 300, width: '100%'}}
|
|
||||||
renderItem={this.renderItem}
|
renderItem={this.renderItem}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
Loading…
Reference in a new issue