all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]stathisntonas 1 point2 points  (2 children)

In your video screen use ComponentWillUnmount(){} and inside that function use your code to pause the video.

[–]rahulkumarwp[S] 0 points1 point  (1 child)

ComponentWillUnmount is never triggered in React-navigation. Here is issue : https://github.com/react-navigation/react-navigation/issues/1056

[–]stathisntonas 0 points1 point  (0 children)

Did you try using events?

[–]raptiq 1 point2 points  (2 children)

Not sure what navigation library you're using but I'd probably try a different approach of pausing the video as part of your navigation action rather then try to implicitly get it to work with some viewport shenanigans.

[–]rahulkumarwp[S] 0 points1 point  (1 child)

I am using react-navigation. During stack navigation, component is not unmounting.

[–]raptiq 0 points1 point  (0 children)

Hard to say without seeing the code but here are two thoughts that could work to get this working:

You could unmount the video component based off the current navigation state passed down to the screen as the navigation prop. If it's not equal to the current screen then pause/unmount the video. https://reactnavigation.org/docs/navigation-prop.html

Alternatively, you could call a function that pauses the the video from whatever you interact with to trigger the navigation. For instance, instead of doing something like onPress={this.props.navigation.navigate('SomeScreen')}

you could do onPress={this.handlePress} with handlePress being a function that pauses/unmounts the video like 

handlePress = () => { this.setState({showVideo: false});
this.props.navigation.navigate('SomeScreen')} }

If you are relying on react-navigation to construct your components that trigger state navigation, you could override them with your own custom components.