Further FlatList performance improvements

This commit is contained in:
Arnaud Vergnet 2020-04-05 21:06:00 +02:00
parent 8a1b90a860
commit 04793d057e
4 changed files with 14 additions and 1 deletions

View file

@ -36,6 +36,8 @@ function ProxiwashListItem(props) {
<Card <Card
style={{ style={{
margin: 5, margin: 5,
height: props.height,
justifyContent: 'center',
}} }}
onPress={props.onPress} onPress={props.onPress}
> >
@ -99,7 +101,6 @@ const styles = StyleSheet.create({
}, },
title: { title: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: 64
} }
}); });

View file

@ -18,6 +18,7 @@ type Props = {
stickyHeader: boolean, stickyHeader: boolean,
createDataset: Function, createDataset: Function,
updateData: number, updateData: number,
itemHeight: number,
} }
type State = { type State = {
@ -41,6 +42,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
renderSectionHeader: null, renderSectionHeader: null,
stickyHeader: false, stickyHeader: false,
updateData: 0, updateData: 0,
itemHeight: undefined,
}; };
refreshInterval: IntervalID; refreshInterval: IntervalID;
@ -162,6 +164,8 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
*/ */
hideSnackBar = () => this.setState({snackbarVisible: false}); hideSnackBar = () => this.setState({snackbarVisible: false});
itemLayout = (data, index) => ({length: this.props.itemHeight, offset: this.props.itemHeight * index, index});
render() { render() {
let dataset = []; let dataset = [];
if (this.state.fetchedData !== undefined) if (this.state.fetchedData !== undefined)
@ -193,6 +197,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
icon={"access-point-network-off"} icon={"access-point-network-off"}
onRefresh={this.onRefresh}/> onRefresh={this.onRefresh}/>
} }
getItemLayout={this.props.itemHeight !== undefined ? this.itemLayout : undefined}
/> />
<Snackbar <Snackbar
visible={this.state.snackbarVisible} visible={this.state.snackbarVisible}

View file

@ -8,6 +8,7 @@ import {List, withTheme} from 'react-native-paper';
import HeaderButton from "../../components/Custom/HeaderButton"; import HeaderButton from "../../components/Custom/HeaderButton";
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json"; const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
const LIST_ITEM_HEIGHT = 84;
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -223,6 +224,10 @@ class ProximoMainScreen extends React.Component<Props, State> {
icon={item.type.icon} icon={item.type.icon}
color={this.colors.primary}/>} color={this.colors.primary}/>}
right={props => <List.Icon {...props} icon={'chevron-right'}/>} right={props => <List.Icon {...props} icon={'chevron-right'}/>}
style={{
height: LIST_ITEM_HEIGHT,
justifyContent: 'center',
}}
/> />
); );
} else } else

View file

@ -21,6 +21,7 @@ let modalStateStrings = {};
let stateIcons = {}; let stateIcons = {};
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
const LIST_ITEM_HEIGHT = 64;
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -486,6 +487,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
isDryer={isDryer} isDryer={isDryer}
statusText={stateStrings[ProxiwashConstants.machineStates[item.state]]} statusText={stateStrings[ProxiwashConstants.machineStates[item.state]]}
statusIcon={stateIcons[ProxiwashConstants.machineStates[item.state]]} statusIcon={stateIcons[ProxiwashConstants.machineStates[item.state]]}
height={LIST_ITEM_HEIGHT}
/> />
); );
} }