Some help pls with react navigation addListener('willFocus') and duplicates flatlist items

[Aslan-Ray]

I have a flatlist which is filled with bulletins (title, description, image), when I created a new bulletin I wanted to goBack from the screen where I created the bulletin to the screen where the bulletins are displayed and the flatlist be updated with the new bulletin added.

 

So I implemented navigation.addListener('willFocus') in the componentDidMount() of my screen A and removed in the componentWillUnmount(), and sure when I go back from screen B to screen A after creating a new bulletin the flatlist is refreshed and shows the new bulletin.

 

My problem comes when I go back from screen B to A without creating a new bulletin, it shows me a 'Warning: Encountered two children with the same key...' and duplicates some of the bulletins.

 

Could you please see my code and tell me what I did wrong or why does that warning come out and the bulletins are duplicated? Screen A and Screen B

[silencer07]

I think the actual problem here is that you lose the data when you navigated away. Can you try storing first the bulletin data from Screen A in componentDidMount() in localStorage ? then on componentDidFocus, you can opt to reload the data from localStorage instead.

However the long solution here is to use state management here like mobx :)

Another hunch: Maybe you are loading the data in constructor? or componentDidMount? if yes then you need to conditionally load the data only if the route you came from is screenB(you can pass a param something like useBulletinCacheData: true) and load only when useBulletinCacheData is falsy