diff --git a/components/Lists/ClubListItem.js b/components/Lists/ClubListItem.js index de4c3bf..a72ed8a 100644 --- a/components/Lists/ClubListItem.js +++ b/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 { +class ClubListItem extends React.Component { colors: Object; hasManagers: boolean; @@ -22,12 +22,23 @@ class ClubListItem extends React.PureComponent { this.hasManagers = props.item.responsibles.length > 0; } + shouldComponentUpdate() { + return false; + } + getCategoriesRender(categories: Array) { 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( + + {category.name} + + ); } } return {final}; @@ -56,6 +67,10 @@ class ClubListItem extends React.PureComponent { 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', + }} /> ); } diff --git a/screens/Amicale/Clubs/ClubListScreen.js b/screens/Amicale/Clubs/ClubListScreen.js index 6a5a9c2..a171c9e 100644 --- a/screens/Amicale/Clubs/ClubListScreen.js +++ b/screens/Amicale/Clubs/ClubListScreen.js @@ -20,6 +20,8 @@ type State = { currentSearchString: string, } +const LIST_ITEM_HEIGHT = 96; + class ClubListScreen extends React.Component { state = { @@ -86,6 +88,8 @@ class ClubListScreen extends React.Component { 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 { 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 { return ( ); } else