Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FlatList with some data
class FlatListDemo extends Component {
state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: false,
}
componentDidMount () {
this.setState({ loading: true }, () => this.makeRemoteRequest());
}
makeRemoteRequest = async () => {
const { page, seed } = this.state;
const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
try {
const response = await fetch(url);
const data = await response.json();
this.setState(
{
data:
page === 1 ? data.results : [...this.state.data, ...data.results],
error: data.error || null,
loading: false,
refreshing: false
},
// () => this.searchFilterFunction("")
);
} catch (error) {
this.setState({ error, loading: false });
}
}
_renderItem = ({item}) => (
<View
style={{
flexDirection: "row",
flex: 1
}}>
<Image
style={{ width: 40, height: 40, borderRadius: 20, margin: 5 }}
source={{ uri: item.picture.thumbnail }}
resizeMethod={"resize"} />
<View style={{ justifyContent: "center", marginLeft: 5 }}>
<Text>{`${item.name.first} ${item.name.last}`}</Text>
<Text>{item.email}</Text>
</View>
</View>
)
_keyExtractor = (item, index) => item.email
render(){
return(
<FlatList
data={this.state.data}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
/>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.