Why Flatlist Is Not Updating Dynamically in React Native

react native FlatList not rerendering when data prop changes

change case ACTIVE_USER_CHILD_REMOVED like following it should work, you are modifying the object which was mutating the state object instead of returning a new object.

case ACTIVE_USER_CHILD_REMOVED:
  const key2Del = action.payload.userId;
  const {activeUsers:{[key2Del]:_,...restActiveUsers}} = state;
  return {...state,activeUsers:{...restActiveUsers}};

FlatList not rendering style dynamically

Well the main issue was that I was not using the .setState and instead I was doing assignations which killed the listeners.

How to re-render flatlist?

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.

React Native FlatList only gets updated when TextInput or Picker changes

It seems .push() works in the setter function from React Hooks but It doesn't. Rather than returning the array itself, .push() returns the length of the array after modification.

On the other hand, .concat() works to update state, that is .concat() creates a new array and then returns the changed array.

So just change your joinData function a little bit in this way.

const joinData = () => {
    setListValue(listValues => listValues.concat({ "content": value, "category": pickerValue, "key": listValues.length.toString() }));
}

---

Related Topics