CODEWITHSUNDEEP
react-nativeredux
Alexander
Alexander

Reputation: 167

Refresh Flatlist React native

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]);

Upvotes: 0

Views: 7564

Answers (4)

Ali Raza
Ali Raza

Reputation: 3167

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}));

Upvotes: 0

developer73
developer73

Reputation: 41

You can use the extraData prop in Flatlist.

Upvotes: 0

sakshya73
sakshya73

Reputation: 7162

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

Upvotes: 1

MHP
MHP

Reputation: 663

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);
}, []);

Upvotes: 0

Related Questions