Refresh Flatlist React native - react-native

Question

I try to reload my feed in my flatlist with refreshControl. The scroll works fine, so if I scroll down the ActivityIndicator shows. But the problem is that the flatlist doesn't updates. Can any one see why or have a another solution to reload a flatlist?
This is my reload function:
return new Promise(resolve => setTimeout(resolve, timeout));
}
const onRefresh = React.useCallback(() => {
setRefreshing(true);
props.reload()
wait(2000).then(() => setRefreshing(false));
}, []);
This is how I display it in my flatlist
<FlatList
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
numColumns={1}
horizontal={false}
data={filteredDataSource}
extraData={filteredDataSource}
renderItem={({ item }) =>
{My Items here}
/>
}
in my Action.js (redux) I have I Function called reload()
export function reload() {
return ((dispatch) => {
dispatch(clearData())
dispatch(fetchUsersData())
dispatch(fetchUser())
dispatch(fetchUserPosts())
dispatch(fetchFollowingUsersPosts())
})
}
Here I set my FilteredDataSource to my posts
useEffect(() => {
let posts = [];
if (props.usersPostLoaded == props.allPosts.length) {
for (let i = 0; i < props.allPosts.length; i++) {
const user = props.users.find(el => el.uid === props.allPosts[i]);
if (user != undefined) {
posts = [...posts, ...user.posts]
}
}
posts.sort(function (x, y) {
return x.creation - y.creation
})
setPosts(posts);
setFilteredDataSource(posts);
setMasterDataSource(posts);
}
}, [props.usersPostLoaded]);

Answer 1

You can use the extradata prop in flatlist and your flatlist will refresh with change in that data.
extraData={userData}
https://reactnative.dev/docs/flatlist#extradata

Answer 2

One of the way to Implementation it , usage from useEffect for control your life cycle and in this case controlling refreshing data , you can add this code:
React.useEffect(()=>{
if (refreshing){
dispatch(clearData())
dispatch(fetchUsersData())
dispatch(fetchUser())
dispatch(fetchUserPosts())
dispatch(
fetchFollowingUsersPosts()
)
setRefreshing(false);
};
} , [refreshing])
Also change your onRefresh to:
const onRefresh = React.useCallback(() => {
setRefreshing(true);
}, []);

Answer 3

You can use the extraData prop in Flatlist.

Answer 4

According to the FlatList docs, re-renders can be caused by passing extraData={this.state} to FlatList.
<FlatList
extraData={this.state.index}
showsVerticalScrollIndicator={false}
removeClippedSubviews={false}
data={this.props.response}
keyExtractor={(item, index) => index}
renderItem={({item, index}) => this.renderFlatListItem (item, index)}
/>
Now update it like this
this.setState(prevState => ({index: prevState.index + 1}));