React Native scroll to refresh is not working properly with pagination - react-native

Question

i am new to react native please bear with me. I currently have a flatlist in my react native project which fetch's posts from my backend using an api. I have success implemented pagination on my backend and in my app when i scroll to the end it adds the newly fetched posts to the bottom of the current posts shown.
My problem is when i scroll to refresh, i only want the posts of page 0 to get shown.
What is happening is the posts on page 0 get added to the bottom of the posts instead of showing these posts only.
So for example, when i load my app, posts on page 0 get rendered and when i scroll to refresh instead of just showing posts on page 0, the posts on page 0 get added to the bottom of the posts on page 0 and therefore i get an error that id is duplicated.
The required action i am trying to obtain is when i scroll to refresh i just want the posts on page 0 to show.
Here is my code:
function PostsScreen({ navigation }) {
const [posts, setPosts] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const loadPosts = async () => {
setLoading(true);
const response = await postsApi.getPosts(page);
setLoading(false);
if (!response.ok) return setError(true);
setError(false);
setPosts([...posts,...response.data]);
};
const[page,setPage]=useState(0);
useEffect(() => {
loadPosts(page);
}, [page]);
const handleLoadMore = ()=>{
console.log('loadmore')
setPage(page+1);
}
const [refreshing, setRefreshing] = useState(false);
return (
<>
<ActivityIndicator visible={loading} />
<Screen style={styles.screen}>
<FlatList
data={posts} // to have all the data
keyExtractor={(post) => post.id.toString()}
renderItem={({ item,index }) => (
<Card
title={item.title}
subTitle={item.subTitle}
onPress={() => navigation.navigate(routes.POST_DETAILS, {post:item,index})}
/>
)}
refreshing={refreshing}
onRefresh={() => {
loadPosts(0); // I think the problem is here.//
setPage(0);
}}
onEndReached={handleLoadMore}
onEndReachedThreshold={0}
initialNumToRender={10}
/>
</Screen>
</>
);
}
Thank you in advance.

Answer 1

From what I read, I believe you want to implement pagination in your application and you have that in your code as well. Now, when you try refreshing your list, you just want to set the list to the initial 10 items. if so,
function PostsScreen({ navigation }) {
const [posts, setPosts] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(0);
const [refreshing, setRefreshing] = useState(false);
const loadPosts = async () => {
setLoading(true);
const response = await postsApi.getPosts(page);
setLoading(false);
if (refreshing)
setRefreshing(false);
if (!response.ok) return setError(true);
setError(false);
if (page == 0)
setPosts(response.data)
else
setPosts([...posts, ...response.data]);
};
useEffect(() => {
loadPosts();
}, [page]);
const handleLoadMore = () => {
setPage(page + 1);
};
const onRefresh = () => {
setRefreshing(true);
setPage(0);
};
return (
<>
<ActivityIndicator visible={loading} />
<Screen style={styles.screen}>
<FlatList
data={posts}
renderItem={({ item, index }) => (
<Card
title={item.title}
subTitle={item.subTitle}
onPress={() => navigation.navigate(routes.POST_DETAILS, { post: item, index })}
/>
)}
refreshing={refreshing}
onRefresh={onRefresh}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.05}
keyExtractor={(post) => post.id.toString()}
/>
</Screen>
</>
);
}
This should fix your problem.

Answer 2

const loadPosts = async () => {
setLoading(true);
const response = await postsApi.getPosts(page);
setLoading(false);
if (!response.ok) return setError(true);
setError(false);
if(page=== 0){
setPosts(response.data);
}else{
setPosts([...posts,...response.data]);
}
};
//...
onRefresh={() => {
setPage(0);
loadPosts(); // loadPosts takes no argument.
}
}
//...
const handleLoadMore = ()=>{
console.log('loadmore')
setPage(page+1);
loadPosts();
}