Issue
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 :
Use props to pass a callback from
MyVideoList
toMyVideo
. but got error :WARN Non-serializable values were found in the navigation state.
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 ?
Solution
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.
Answered By - user18309290
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.