Adding dynamic data on the fly to the data array will not update the internal FlatList data

[Symyon]

Data array sent to FlatList is first saved into state on constructor and then used in FlatList internal component. So, when you modify an element of the data array while list is rendered on the screen, that new data will not be sent to the specific element as 'item'.

I have FlatListSlider that takes a custom render component for each item. Each item has a feature to upload an image and then display it in that component when upload succeeded. So, basically, the custom component has an Image component inside that will get its 'uri' updated on the fly. When I do that, the image will not appear like nothing happened, the data array sent to FlatListSlider is updated. It's enough to navigate to another screen and come back to get the image to show.

I checked internal code and it seems the data sent to FlatListSlider is cached as state on constructor call. So change of the data array props will not update the internal FlatList data array. Changing "data={this.state.data}" to "data={this.props.data}" will fix the issue.

Was that done for performance considerations? Why not use this.props.data directly and why caching it to state?

[LuamLeite]

Thank you very much for this. I have been stuck for weeks thinking the problem was my state management, I can't tell you how much I read the documentation and tried different approaches to make this work. And all along it was just the component by itself that had an error.
Lesson learned, next time I will check the code of the component as well. Thank you again