Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import {
Text,
View,
FlatList,
Dimensions
} from "react-native";
const numItems = 10;
const { height, width } = Dimensions.get("window");
class ListsScreen extends React.Component {
state = {
data: Array.from(Array(numItems).keys()),
isRefreshing: false,
page: 0
};
refreshData = () => {
this.setState({ isRefreshing: true });
const data = this.state.data.map(x => x * 2);
this.setState({ data, isRefreshing: false });
};
moreData = () => {
const { page } = this.state;
const data = Array.from(Array(numItems).keys()).map(
x => x + numItems * (page + 1)
);
this.setState(prevState => ({
data: [...prevState.data, ...data],
page: prevState.page + 1
}));
};
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<View
style={{
height: width / 2,
width: width,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: item % 2 === 0 ? "lightpink" : "lightblue"
}}
>
<Text>{`Item ${item}`}</Text>
</View>
)}
keyExtractor={(item, index) => `key-${index}`}
onRefresh={this.refreshData}
refreshing={this.state.isRefreshing}
onEndReached={({ distanceFromEnd }) => {
this.moreData();
}}
onEndReachedThreshold={0}
/>
</View>
);
}
}
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.