How to re-render flatlist

Question

Unlike ListView we can update this state datasource  Is there any method or example to update FlatList or re-render it   My goal is to update the text value when user press button      renderEntries   item  index          return           lt TouchableHighlight onPress      gt  this setState  value  this state data index  value 1   gt                lt Text gt  this state data index  value  lt  Text gt           lt  TouchableHighlight gt            lt FlatList      ref   ref    gt    this list   ref          keyExtractor   item    gt  item entry entryId       data  this state data       renderItem  this renderEntries bind this        horizontal  false    gt

User · Answer

Oh that s easy  just use extraData  You see the way extra data works behind the scenes is the FlatList or the VirtualisedList just checks wether that object has changed via a normal onComponentWillReceiveProps method   So all you have to do is make sure you give something that changes to the extraData   Here s what I do   I m using immutable js so all I do is I pass a Map  immutable object  that contains whatever I want to watch    lt FlatList     data  this state calendarMonths      extraData  Map           foo  this props foo          bar  this props bar             renderItem     item     gt             lt CustomComponentRow             item  item              foo  this props foo              bar  this props bar            gt            gt    In that way  when this props foo or this props bar change  our CustomComponentRow will update  because the immutable object will be a different one than the previous

User · Answer

For me  the trick was extraData and drilling down into the item component one more time   state       uniqueValue  0     lt FlatList   keyExtractor   item  index    gt  item   index    data  this props photos    renderItem  this renderItem    ItemSeparatorComponent  this renderSeparator    gt   renderItem    item    gt      if item item selected        return    lt Button onPress  this itemPressed bind this  item   gt Selected lt  Button gt           return    lt Button onPress  this itemPressed bind this  item   gt Not selected lt  Button gt       itemPressed  item      this props photos map  img  i    gt        if i     item index          if img  selected             delete img selected          else           img  selected     true                this setState   uniqueValue  this state uniqueValue  1

User · Answer

In this example  to force a re-render  just change the variable machine  const  selected  setSelected    useState machine   useEffect      gt        setSelected machine      machine

User · Answer

I solved this problem by adding extraData  this state  Please check code below for more detail  render         return          lt View style  styles container  gt           lt FlatList           data  this state arr            extraData  this state            renderItem     item      gt   lt Text style  styles item  gt  item  lt  Text gt             gt         lt  View gt

User · Answer

Flatlist s extraData wasn t working for me and I happened to be using a prop from redux  This sounded similar to issues from the comments in ED209 s answer  I ended up manually calling setState when I receive the prop   componentWillReceiveProps nextProps  StateProps        if  this props yourProp    null  amp  amp  nextProps yourProp            this setState   yourState  processProp nextProps yourProp                 lt FlatList   data  this state yourState    extraData  this state yourState    gt    For those of you using   React 17 use getDerivedStateFromProps

User · Answer

OK I just found out that if we want the FlatList to know the data change outside of the data prop we need set it to extraData  so I do it like this now    lt FlatList data       extraData  this state       gt    refer to   https   facebook github io react-native docs flatlist extradata

User · Answer

after lots of searching and looking for real answer finally i got the answer which i think it is the best             lt FlatList       data  this state data        renderItem  this renderItem        ListHeaderComponent  this renderHeader        ListFooterComponent  this renderFooter        ItemSeparatorComponent  this renderSeparator        refreshing  this state refreshing        onRefresh  this handleRefresh        onEndReached  this handleLoadMore        onEndReachedThreshold  1        extraData  this state data        removeClippedSubviews  true          keyExtractor    item  index    gt  index                     gt              my main problem was  KeyExtractor   i was not using it like this   not working   keyExtractor    item     item ID  after i changed to this it worked like charm i hope this helps someone

User · Answer

For quick and simple solution Try    set extra data to a boolean value   extraData  this state refresh  Toggle the value of boolean state when you want to re-render refresh list   this setState        refresh   this state refresh

User · Answer

Use the extraData property on your FlatList component   As the documentation states      By passing extraData  this state  to FlatList we make sure FlatList will re-render itself when the state selected changes  Without setting this prop  FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes

User · Answer

If you are going to have a Button  you can update the data with a setState inside the onPress  SetState will then re-render your FlatList

User · Answer

Just an extension on the previous answers here  Two parts to ensure  Make sure that you add in extraData and that your keyExtractor is unique  If your keyExtractor is constant a rerender will not be triggered     lt FlatList data  this state AllArray  extraData  this state refresh  renderItem     item index     gt this renderPhoto item index   keyExtractor  item   gt  item id   gt                                       lt  FlatList gt

User · Answer

In react-native-flatlist  they are a property called as extraData  add the below line to your flatlist     lt FlatList           data  data             style  FlatListstyles            extraData  this state            renderItem  this  renderItem           gt

User · Answer

Put variables that will be changed by your interaction at extraData   You can be creative   For example if you are dealing with a changing list with checkboxes on them    lt FlatList       data  this state data items        extraData  this state data items length    this state data done length   1          renderItem    item     gt   lt View gt

User · Answer

I have replaced FlatList with SectionList and it is updates properly on state change    lt SectionList   keyExtractor   item    gt  item entry entryId     sections  section    renderItem  this renderEntries bind this     renderSectionHeader       gt  null    gt    The only thing need to keep in mind is that section have diff structure   const section        id  0    data  this state data

User · Answer

I am using functional component  in that I am using Flatlist with redux data  I am managing all the state with Redux store  Here is the solution to update the Flatlist data after the api call  I was first doing like this - const DATA    useSelector  state    gt  state address address      lt FlatList     style    styles myAddressList      data    DATA      renderItem    renderItem      keyExtractor    item   gt  item  id      ListEmptyComponent    EmptyList      ItemSeparatorComponent  SeparatorWhite      extraData    refresh             gt   but the data was not re-rendering my Flatlist data at all  As a solution I did like given Below -  lt FlatList     style    styles myAddressList      data    useSelector  state    gt  state address address       renderItem    renderItem      keyExtractor    item   gt  item  id      ListEmptyComponent    EmptyList      ItemSeparatorComponent  SeparatorWhite        gt   I am passing the Redux state directly to the Flatlist Datasource rather than allocating it to the variable  Thank you

User · Answer

Just use   onRefresh  true    inside your flatList component

User · Answer

If we want the FlatList to know the data change both prop and state we can construct an object referencing both prop and state and refresh the flatlist   const hasPropOrStateChange     propKeyToWatch  this props     this state    lt FlatList data       extraData  this hasPropOrStateChange       gt    Docs  https   facebook github io react-native docs flatlist extradata

[reactjs] How to re-render flatlist?

Examples related to reactjs

Examples related to react-native

Examples related to react-native-flatlist