I have the following react native code which works fine on android but not on ios:
const [paging, setPaging] = useState({
page: '',
notLastPage: true
})
const MediaHandler = () => {
if (paging.notLastPage) {
CameraRoll.getPhotos({
first: 5,
after: paging.page,
assetType: 'Photos'
}).then(response => {
console.log('response', response)
let array = []
response.edges.map((p, i) => {
array.push({
key: p.node.image.uri,
uri: p.node.image.uri,
})
})
setMedia([...media, ...array])
setPaging(prevState => ({
...prevState,
page: response.page_info.end_cursor,
notLastPage: response.page_info.has_next_page
}))
})
}
}
useEffect(() => {
MediaHandler()
}, [])
<FlatList
data={media}
renderItem={({ item, index }) => RenderMediaHandler(item)}
onEndReached={MediaHandler}
numColumns={3}
/>
(RenderMediaHandler is just a function to display the photos.)
How does it work?
When opening the screen, the function runs (useEffect). I fetched 5 photos. It also checks if there are any photos left. If the flatlist reached the end, the function is called again, and if there are any photos left, the next 5 photos are fetched. And so on. When there are no photos left, then paging.notLastPage is set to "false" and the function will not be executed anymore when the flatlist reaches the end.
This works exactly like it should on android, but not on ios. I just don't get any nodes (photos) in the response when I do a console.log(response)
.
When I leave out after: paging.page
, I do get some photos, but only the first 5.
What's wrong with my code? I don't find any answers on their github page.