How to refresh parent component when child component returns

Question

I have a simple react-native application using @react-navigation/native for screen navigation.

The app consists of two components : MyVideoList and MyVideo

MyVideoList displays a list of videos, one of them is marked as current based on lastViewed field, and has a green background.

Let's say I have 4 videos :

Video 1
Video 2
Video 3
Video 4

and Video1 is current. Now I tap Video 2, Video 2 starts to play.

When Video 2 finishes to play, I use navigation.goBack to go back to MyVideoList, at this moment, Video 1 is still marked as current (green). I want to refresh MyVideoList so that Video 2 (which has the most recent lastViewed field now) is marked green.

What I tried :

1. Use props to pass a callback from MyVideoList to MyVideo. but got error : WARN Non-serializable values were found in the navigation state.

2. Use redux, with error : ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

What other approaches can I try ?

Answer 1

Instead of passing a callback, pass the status parameter and update it in the details screen. Something like this:

React.useEffect(() => {
  if (route.params?.video) {
    // TODO video played
  }
}, [route.params?.video]);

...

navigation.navigate('MyVideo', { video: { id: 2, played: false } })

route.params.video.played = true
navigation.navigate({
  name: 'MyVideoList',
  params: route.params,
  merge: true,
});

See Passing params to a previous screen for details.