Skip to content
Advertisement

React Native FlatList with custom buttons, how to change color on click?

I have created a FlatList that renders names. Each row has its own button. When you click the button, the name is added to a list and the button should change color

My problem is that the button does not change color as soon as I click on it, it only changes color when I make a pull refresh on my FlatList

Use my snack: https://snack.expo.io/@thesvarta/92f850

This is my component

JavaScript

This is my Action

JavaScript

And my reducer

JavaScript

Advertisement

Answer

The extraData property of the FlatList component is missing:

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render 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.

LInk to the docs: https://facebook.github.io/react-native/docs/flatlist

This property updates the FlatList when the passed object is updated. In your case you need to pass:

JavaScript

Here is a working demo of your snack.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement