hi im using react native with sagas and redux, my problem is this one my code does print a big list of materials with some info everything is fine. the problem is that it loads the whole list and that makes it feel very low, so i need to improve that, i want to print like 10 items of the list and when the user scrolldown it loads another 10 and so any kind of advice would be much appreciated
this is my code where i print the list
class WorkOrdersPage extends Component {
state = {
searched: false,
searchSerialNumber: '',
mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
ponentDidMount() {
const { workOrdersRequest, token } = this.props
workOrdersRequest(token)
}
_renderMockFlatList = () => {
const { listItem, listItemLeft, listItemRightView, listItemRightViewIcon, listItemMockText } = stylesWorkOrders
return (
<FlatList
style={{ opacity: 0.6 }}
data={this.state.mockData}
renderItem={({ item }) => {
return (
<ListItem onPress={() => { }} style={[listItem, { borderColor: '#dadada' }]}>
<Left style={listItemLeft}>
<Thumbnail square large source={Images.noPart} />
<Body>
<Text style={[listItemMockText, { width: 100 }]} />
<Text style={[listItemMockText, { width: 200 }]} />
<Text style={[listItemMockText, { marginBottom: 0, width: 70 }]} />
</Body>
</Left>
<Right>
<View style={listItemRightView}>
<Icon style={listItemRightViewIcon} name="ios-arrow-forward" />
</View>
</Right>
</ListItem>
)
}}
/>
)
}
_renderWorkOrder = ({ item }) => {
const { navigate } = this.props.navigation
let Description = ''
let thumb = Images.noPart
let borderColor = "#dadada"
try {
Description = item.RouteCard[0].PartInfo.Description
} catch (err) { }
if (item.RouteCard && item.RouteCard[0] && item.RouteCard[0].Id >= 2 && item.RouteCard[0].Id <= 10) {
const { Id } = item.RouteCard[0]
thumb = Images.part[Id]
if (Id >= 0 && Id <= 4)
borderColor = '#eb5da4'
if (Id >= 5 && Id <= 7)
borderColor = '#6061aa'
if (Id >= 8 && Id <= 10)
borderColor = '#fe9200'
}
const { listItem, listItemLeft, listItemLeftTextMain, listItemLeftTextSecondary, listItemRightView, listItemRightViewLabel, listItemRightViewDate, listItemRightViewIcon } = stylesWorkOrders
return (
<ListItem onPress={() => navigate('WorkOrderPage', { workOrderId: item.Id })}
style={[listItem, { borderColor }]}>
<Left style={listItemLeft}>
<Thumbnail square large source={thumb} />
<Body>
<Text style={listItemLeftTextMain}>{item.WONum.toUpperCase()}</Text>
<Text style={listItemLeftTextSecondary}>{Description}</Text>
</Body>
</Left>
<Right>
<View style={listItemRightView}>
<Text style={listItemRightViewLabel}>Req. Date: </Text>
<Text style={listItemRightViewDate}>{moment(item.ModifiedDate).format("ll")}</Text>
<Icon style={listItemRightViewIcon} name="ios-arrow-forward" />
</View>
</Right>
</ListItem>
)
}
_renderFlatList = () => {
const { orders, ordersBySerial } = this.props
const data = ordersBySerial.length > 0 && this.state.searched === true ? ordersBySerial : orders
const renderItem = ordersBySerial.length > 0 && this.state.searched === true ? this._renderWorkOrderQuickAccess : this._renderWorkOrder
return (
<FlatList
data={data}
renderItem={renderItem}
ListEmptyComponent={this._renderEmpty}
/>)
}
render() {
const { header, mainBackgroundColor, headerTitle, container } = stylesWorkOrders
const { orders, workOrdersBySerialRequest, token, ordersBySerial } = this.props
const { searchSerialNumber, searched } = this.state
return (
<Container>
<Header style={[header, mainBackgroundColor]}>
<Thumbnail square size={35} source={Images.logo_topBar} />
<Title style={headerTitle}>Work Orders</Title>
</Header>
<Header style={mainBackgroundColor} searchBar>
<Item style={{ borderRadius: 3, paddingLeft: 10, paddingRight: 10 }}>
<Input
placeholder="Type Serial Number"
value={searchSerialNumber}
onChangeText={(text) => this.setState({ searchSerialNumber: text })}
/>
{
searched === true ?
<Icon name="md-close" onPress={() => {
this.setState({ searchSerialNumber: '', searched: false })
}} />
:
<Icon name="ios-search" onPress={() => {
if (searchSerialNumber.length == 0) return false
workOrdersBySerialRequest(token, searchSerialNumber)
this.setState({ searched: true })
}} />
}
</Item>
</Header>
<Content style={container}>
{orders.length === 0 ? this._renderMockFlatList() : this._renderFlatList()}
</Content>
</Container>
);
}
}
hi im using react native with sagas and redux, my problem is this one my code does print a big list of materials with some info everything is fine. the problem is that it loads the whole list and that makes it feel very low, so i need to improve that, i want to print like 10 items of the list and when the user scrolldown it loads another 10 and so any kind of advice would be much appreciated
this is my code where i print the list
class WorkOrdersPage extends Component {
state = {
searched: false,
searchSerialNumber: '',
mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
ponentDidMount() {
const { workOrdersRequest, token } = this.props
workOrdersRequest(token)
}
_renderMockFlatList = () => {
const { listItem, listItemLeft, listItemRightView, listItemRightViewIcon, listItemMockText } = stylesWorkOrders
return (
<FlatList
style={{ opacity: 0.6 }}
data={this.state.mockData}
renderItem={({ item }) => {
return (
<ListItem onPress={() => { }} style={[listItem, { borderColor: '#dadada' }]}>
<Left style={listItemLeft}>
<Thumbnail square large source={Images.noPart} />
<Body>
<Text style={[listItemMockText, { width: 100 }]} />
<Text style={[listItemMockText, { width: 200 }]} />
<Text style={[listItemMockText, { marginBottom: 0, width: 70 }]} />
</Body>
</Left>
<Right>
<View style={listItemRightView}>
<Icon style={listItemRightViewIcon} name="ios-arrow-forward" />
</View>
</Right>
</ListItem>
)
}}
/>
)
}
_renderWorkOrder = ({ item }) => {
const { navigate } = this.props.navigation
let Description = ''
let thumb = Images.noPart
let borderColor = "#dadada"
try {
Description = item.RouteCard[0].PartInfo.Description
} catch (err) { }
if (item.RouteCard && item.RouteCard[0] && item.RouteCard[0].Id >= 2 && item.RouteCard[0].Id <= 10) {
const { Id } = item.RouteCard[0]
thumb = Images.part[Id]
if (Id >= 0 && Id <= 4)
borderColor = '#eb5da4'
if (Id >= 5 && Id <= 7)
borderColor = '#6061aa'
if (Id >= 8 && Id <= 10)
borderColor = '#fe9200'
}
const { listItem, listItemLeft, listItemLeftTextMain, listItemLeftTextSecondary, listItemRightView, listItemRightViewLabel, listItemRightViewDate, listItemRightViewIcon } = stylesWorkOrders
return (
<ListItem onPress={() => navigate('WorkOrderPage', { workOrderId: item.Id })}
style={[listItem, { borderColor }]}>
<Left style={listItemLeft}>
<Thumbnail square large source={thumb} />
<Body>
<Text style={listItemLeftTextMain}>{item.WONum.toUpperCase()}</Text>
<Text style={listItemLeftTextSecondary}>{Description}</Text>
</Body>
</Left>
<Right>
<View style={listItemRightView}>
<Text style={listItemRightViewLabel}>Req. Date: </Text>
<Text style={listItemRightViewDate}>{moment(item.ModifiedDate).format("ll")}</Text>
<Icon style={listItemRightViewIcon} name="ios-arrow-forward" />
</View>
</Right>
</ListItem>
)
}
_renderFlatList = () => {
const { orders, ordersBySerial } = this.props
const data = ordersBySerial.length > 0 && this.state.searched === true ? ordersBySerial : orders
const renderItem = ordersBySerial.length > 0 && this.state.searched === true ? this._renderWorkOrderQuickAccess : this._renderWorkOrder
return (
<FlatList
data={data}
renderItem={renderItem}
ListEmptyComponent={this._renderEmpty}
/>)
}
render() {
const { header, mainBackgroundColor, headerTitle, container } = stylesWorkOrders
const { orders, workOrdersBySerialRequest, token, ordersBySerial } = this.props
const { searchSerialNumber, searched } = this.state
return (
<Container>
<Header style={[header, mainBackgroundColor]}>
<Thumbnail square size={35} source={Images.logo_topBar} />
<Title style={headerTitle}>Work Orders</Title>
</Header>
<Header style={mainBackgroundColor} searchBar>
<Item style={{ borderRadius: 3, paddingLeft: 10, paddingRight: 10 }}>
<Input
placeholder="Type Serial Number"
value={searchSerialNumber}
onChangeText={(text) => this.setState({ searchSerialNumber: text })}
/>
{
searched === true ?
<Icon name="md-close" onPress={() => {
this.setState({ searchSerialNumber: '', searched: false })
}} />
:
<Icon name="ios-search" onPress={() => {
if (searchSerialNumber.length == 0) return false
workOrdersBySerialRequest(token, searchSerialNumber)
this.setState({ searched: true })
}} />
}
</Item>
</Header>
<Content style={container}>
{orders.length === 0 ? this._renderMockFlatList() : this._renderFlatList()}
</Content>
</Container>
);
}
}
1 Answer
Reset to default 4i don't have time now to give a full answer sorry
you have to use onEndReached flatlist props to load some data each time your are in the end of the list (list facebook app do for example)
https://facebook.github.io/react-native/docs/flatlist#onendreached
look on google for "pagination" concept. it's what you talking about (not returning all the data in one time).
state = {
...
currentPage : 0, // we keep a track inside the state on each page we are for pagination
mockData:[]
}
<FlatList
data={this.state.mockData}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => this.renderItem(item)}
initialNumToRender={5} // how many item to display first
onEndReachedThreshold={5} // so when you are at 5 pixel from the bottom react run onEndReached function
onEndReached={() => {
this.handleLoadMore();
}}
/>
handleLoadMore = async() => {
// her you put the logic to load some data with pagination
// for example a service who return the data of the page "this.state.currentPage"
let newData = await myExempleService(this.state.currentPage);
this.setState({
mockData: [ ...mockData , ...newData] , // concat the old and new data together
currentPage : this.state.currentPage +1
})
}