Skip to content

Instantly share code, notes, and snippets.

@SergeyLipko
Created May 29, 2017 18:21
Show Gist options
  • Save SergeyLipko/eb97ee28fbbee8c92704cdc0fb6475a5 to your computer and use it in GitHub Desktop.
Save SergeyLipko/eb97ee28fbbee8c92704cdc0fb6475a5 to your computer and use it in GitHub Desktop.
Example of using RN FlatList component with pagination and pull-refreshing
import React from 'react';
import {
View,
Text,
FlatList,
StyleSheet
} from 'react-native';
import { ListItem } from 'react-native-elements';
class Users extends React.Component {
state = {
seed: 1,
page: 1,
users: [],
isLoading: false,
isRefreshing: false,
};
loadUsers = () => {
const { users, seed, page } = this.state;
this.setState({ isLoading: true });
fetch(`https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`)
.then(res => res.json())
.then(res => {
this.setState({
users: page === 1 ? res.results : [...users, ...res.results],
isRefreshing: false,
});
})
.catch(err => {
console.error(err);
});
};
handleRefresh = () => {
this.setState({
seed: this.state.seed + 1,
isRefreshing: true,
}, () => {
this.loadUsers();
});
};
handleLoadMore = () => {
this.setState({
page: this.state.page + 1
}, () => {
this.loadUsers();
});
};
componentDidMount() {
this.loadUsers();
};
render() {
const { users, isRefreshing } = this.state;
return (
<View style={s.scene}>
{
users &&
<FlatList
data={users}
renderItem={({item}) => (
<ListItem
roundAvatar
title={item.name.first}
subtitle={item.email}
avatar={{uri: item.picture.thumbnail}}
/>
)}
keyExtractor={i => i.email}
refreshing={isRefreshing}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndThreshold={0}
/>
}
</View>
)
}
}
const s = StyleSheet.create({
scene: {
flex: 1,
paddingTop: 25,
},
user: {
width: '100%',
backgroundColor: '#333',
marginBottom: 10,
paddingLeft: 25,
},
userName: {
fontSize: 17,
paddingVertical: 20,
color: '#fff'
}
});
export default Users;
@anil1712
Copy link

anil1712 commented Jun 8, 2018

Loader is not showing

@cicerone-f
Copy link

What is the meaning of "isLoading" in this example?

@raikk
Copy link

raikk commented Feb 13, 2019

Thanks it helpful.
i set it like this for loader

  <View style={s.scene}>
        {
          users &&
            <FlatList
              data={users}
              renderItem={this.renderItem}
              keyExtractor={i => i.email}
              refreshing={isRefreshing}
              //onRefresh={this.handleRefresh}
              onEndReached={this.handleLoadMore}
              onEndThreshold={0}
            />
        }
        {this.state.isLoading && <View style={{flex:1, alignItems:'center'}}><ActivityIndicator size="large" color="#ff6a00" /></View>} // add this line
      </View>
 loadUsers = () => {
 this.setState({ isLoading: true });
fetch(...).then(..)(this.setState({ isLoading: false }) //<--- set it to false )
}

@adeayobandung
Copy link

Kenapa ya loading terus... tidak berhenti

@mohammedghabyen
Copy link

thank you, Great example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment