How can I refresh a particular row on a flatlist in react-native?

Question

I am trying to refresh a particular cell/row in a flatlist. How can i just refresh a single cell when data is loaded. And after refreshing display the data?

Is it possible to refresh a particular row in a view of react-native? For e.g i'm displaying images in a row nested inside <View/>.

It would help us a lot if you can show us code you currently have. It's also possible that this questions is a duplicate of https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url — Tyro Hunter, Mar 25 '19 at 06:11

score 2 · Answer 1 · answered Mar 25 '19 at 06:43

2

You can try extraData in FlatList to update a particular item in flatlist. When state is changed the flatlist will rerender.

<FlatList

    extraData={this.state}
    data={this.state.asPerCode}
    renderItem={this.renderPost}

/>

you can check about extra data in react native flatlist docs.

Hope it helps!

answered Mar 25 '19 at 06:43

abhinandan sharma

783
4
10

This will help to referesh the flatlist content whenever there is change in array. – Arun kumar Mar 25 '19 at 06:44
Is there any way to refresh a single row(say an image styled in row inside a view) inside a view? – Abhirup Mukherjee Mar 25 '19 at 11:55
you simply want to update image inside view or image inside view which itself is inside the flatlist's row? – abhinandan sharma Mar 25 '19 at 12:01

score 0 · Answer 2 · answered Mar 25 '19 at 09:49

I believe you might be looking for React.PureComponent which implements a shallow prop and state comparison to decide if rerender is needed. You can achieve this with shouldComponentUpdate() on React.Component too.

There is already an example in FlatList's docs that demonstrate how you can use PureComponent to render your list, just scroll down abit and look for the "more complex example" :)

If you prefer to use a Functional Component instead of a Class Component, checkout React.memo, which is similar to React.PureComponent but for Functional Components. Hope it helps.

How can I refresh a particular row on a flatlist in react-native?

2 Answers2