onEndReached FlatList React Native - node.js

Question

i currently have a FlatList in my React Native project that renders the posts from nodejs backend. I have applied the pagination to my backend and it is working when i am testing it on postman. My problem is when i test my app on a simulator when i reach the end of the page 0, page 1 does not load.
Here is my FlatList:
<FlatList
data={posts} // to have all the data
keyExtractor={(post) => post.id.toString()}
renderItem={({ item }) => (
<PostCard
title={item.title}
subTitle={item.subTitle}
/>
)}
onEndReached={onScrollHandler}
onEndThreshold={0}
/>
const { data: posts, error, loading, request: loadPosts } = useApi(
postsApi.getPosts
);
useEffect(() => {
loadPosts();
}, []);
const[page,setPage]=useState(0);
const[profiles,setProfiles]=useState([]);
const fetchRecords=(page)=>{
const newRecords = []
for(var i = page * 10, il = i + 10; i < il && i < posts.length; i++){
newRecords.push(posts[i]);
}
setProfiles(...profiles, ...newRecords)
}
const onScrollHandler =()=>{
setPage(page+1);
fetchRecords(page)
}
Here is my nodeJS backend:
router.get("/",
async (req, res) => {
const getPagination = (page, size) => {
const limit = size ? +size : 10;
const offset = page ? page * limit : 0;
return { limit, offset };
};
const { page, size } = req.query;
const { limit, offset } = getPagination(page, size);
const posts = await Post.findAll({
limit,offset,
Here my route is /posts which i declared in my index.js in my backend.
Before applying pagination in my backend, when i used to do console.log(posts) in frontend i used to get all my posts but after i applied pagination when i do console.log(posts) i only get the posts for the first page.

Answer 1

Can you try to put this in useEffect.
useEffect(()=>{ apiCall()},[page])

Answer 2

If I am not wrong, you want to concatenate newly fetched records with the records that you already have, if that is the case, then you are supposed to do it like below:
setProfiles([...profiles, ...newRecords])
example:
let str1 = [1,2,3,4]
let str2 = [5,6,7,7]
// you dont want that
console.log(...str1, ...str2)
// but this, it will create a new array,
// having elements of both str1 and str2 which is what should be
console.log([...str1, ...str2])
Example:
import React, { useState } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const [posts, setPosts] = useState(
Array.from({ length: 10 }, () => Math.floor(Math.random() * 100))
);
const onEndReached = () => {
let newPosts = Array.from(
{ length: 4 },
() => 'New Item Added ' + Math.floor(Math.random() * 100)
);
console.log(newPosts)
setTimeout(() => {
setPosts([...posts, ...newPosts]);
}, 1000);
};
return (
<View style={styles.container}>
<FlatList
data={posts}
onEndReached={onEndReached}
keyExtractor={(posts) => Math.floor(Math.random() * 1000)}
renderItem={({ item }) => (
<Card style={styles.card}>
<Text style={styles.paragraph}>{item}</Text>
</Card>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
margin: 10,
padding: 10,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Expo Demo
Screenshow:

Answer 3

Did you inspect if your onScrollHandler function is called whenever you reached at the end of the flat list.
Also please wrap your flat list inside SafeAreaView and give SafeAreaView style of flex : 1
<SafeAreaView>
<FlatList/>
</SafeAreaView>