qhoarau commented 3 years ago

Bug

On android when I navigate to another screen (using stack navigator or bottom tab navigator. Version : react-navigation : "4.4.2", "react-navigation-stack": "2.8.4", "react-navigation-tabs": "2.9.2", ) the video is paused, or even unmounted because when i get back to the video it starts again from the beginning of the media (can't resume the video except with the seek method). But on iOS, when I navigate away to another screen (with no video), the video is still playing in the background.

This is the behavior I would like (on iOS) as I want to resume video when going back to the video screens (I handle pause/play with on focus/blur events in react navigation).

Is there anyway to have the same behavior on android ?

Platform

Which player are you experiencing the problem on:

Android ExoPlayer

Environment info

React native info output:

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 3.50 GB / 15.95 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7199119
    Visual Studio: Not Found
  Languages:
    Java: Not Found
    Python: 3.9.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: ~0.63.3 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 5.1.1

Steps To Reproduce

1. 2. ...

Expected behaviour

I want the video to keep playing when navigating away from the screen (like on iOS)

Reproducible sample code

link to reproductible demo : https://github.com/qhoarau/ReactNativeVideoBugDemo

Video sample

If possible, include a link to the video that has the problem that can be streamed or downloaded from.

kg-kartik commented 3 years ago

Hey I too faced the same problem actually in my case i was using nested stack navigator inside bottom navigation I dont know the reason tho , but figured it out it was due to that only, so I moved my audio component in the screen which was actually the root child for the bottom navigator as my player was initially in the nested stack.

Bug

On android when I navigate to another screen (using stack navigator or bottom tab navigator. Version : react-navigation : "4.4.2", "react-navigation-stack": "2.8.4", "react-navigation-tabs": "2.9.2", ) the video is paused, or even unmounted because when i get back to the video it starts again from the beginning of the media (can't resume the video except with the seek method). But on iOS, when I navigate away to another screen (with no video), the video is still playing in the background.

This is the behavior I would like (on iOS) as I want to resume video when going back to the video screens (I handle pause/play with on focus/blur events in react navigation).

Is there anyway to have the same behavior on android ?

Platform

Which player are you experiencing the problem on:

Android ExoPlayer

Environment info

React native info output:
System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 3.50 GB / 15.95 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7199119
    Visual Studio: Not Found
  Languages:
    Java: Not Found
    Python: 3.9.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: ~0.63.3 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Library version: 5.1.1

Steps To Reproduce

...

Expected behaviour

I want the video to keep playing when navigating away from the screen (like on iOS)

Reproducible sample code

Video sample

If possible, include a link to the video that has the problem that can be streamed or downloaded from.

qhoarau commented 3 years ago

Hey I too faced the same problem actually in my case i was using nested stack navigator inside bottom navigation I dont know the reason tho , but figured it out it was due to that only, so I moved my audio component in the screen which was actually the root child for the bottom navigator as my player was initially in the nested stack.
Bug

On android when I navigate to another screen (using stack navigator or bottom tab navigator. Version : react-navigation : "4.4.2", "react-navigation-stack": "2.8.4", "react-navigation-tabs": "2.9.2", ) the video is paused, or even unmounted because when i get back to the video it starts again from the beginning of the media (can't resume the video except with the seek method). But on iOS, when I navigate away to another screen (with no video), the video is still playing in the background. This is the behavior I would like (on iOS) as I want to resume video when going back to the video screens (I handle pause/play with on focus/blur events in react navigation). Is there anyway to have the same behavior on android ?

Platform

Which player are you experiencing the problem on:

Android ExoPlayer

Environment info

React native info output:
System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 3.50 GB / 15.95 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7199119
    Visual Studio: Not Found
  Languages:
    Java: Not Found
    Python: 3.9.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: ~0.63.3 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Library version: 5.1.1

Steps To Reproduce

...

Expected behaviour

I want the video to keep playing when navigating away from the screen (like on iOS)

Reproducible sample code

Video sample

If possible, include a link to the video that has the problem that can be streamed or downloaded from.

Thanks for your answer, I tried it but even with my video component as the root child of the bottom tab bar it still behaves the same way.

I made a reproductible demo code available here : https://github.com/qhoarau/ReactNativeVideoBugDemo

Running this on android : when navigating to another screen, the video stops

Running this on iOS : when navigating to another screen, the video keeps playing (that's what I want)

I don't really know what to do

ydv0121 commented 3 years ago

+1

andybui090 commented 3 years ago

+1, Currently, I have pass props when next screen to disable play video, maybe that is bad solution With React navigation V6: import { useIsFocused } from '@react-navigation/native'; useEffect(() => { if (!isFocused && !paused) { setPaused(true); } }, [isFocused]);

vargajacint commented 2 years ago

+1, Currently, I have pass props when next screen to disable play video, maybe that is bad solution With React navigation V6: import { useIsFocused } from '@react-navigation/native'; useEffect(() => { if (!isFocused && !paused) { setPaused(true); } }, [isFocused]);

The problem with this solution, the memory not cleaning when u pause the video programmatically, so careful! Also I'm looking for a solution for this problem

hirbod commented 2 years ago

I am also having this issue with expo-av and every camera component. I think that react-navigation is the root problem here (react native screens)

EugeniuszX commented 2 years ago

not working for me

+1, Currently, I have pass props when next screen to disable play video, maybe that is bad solution With React navigation V6: import { useIsFocused } from '@react-navigation/native'; useEffect(() => { if (!isFocused && !paused) { setPaused(true); } }, [isFocused]);

hirbod commented 2 years ago

The main reason is react-native-reanimated. If you're using "LayoutAnimation" (it does not matter where inside the app, a single usage is enough to enable internal snapshotting) - will break unmounting of elements.

zainbhatti123 commented 2 years ago

+1, Currently, I have pass props when next screen to disable play video, maybe that is bad solution With React navigation V6: import { useIsFocused } from '@react-navigation/native'; useEffect(() => { if (!isFocused && !paused) { setPaused(true); } }, [isFocused]);

I'm facing the same issue and applied your solution, but still not working

dmarcogabriel commented 1 year ago

I had to make some work arounds to resolve this... I'v added some listeners to stop the video, like this:

This is to pause when app is in background

useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (nextAppState.match(/inactive|background/)) {
        setPaused(true); // something like this
      }
    });

    return () => subscription.remove();
  }, []);

Then to pause on navigation.goBack() method:

useEffect(() => {
    if (!paused && closeRequest) {
      navigation.goBack();
    }
  }, [state.play, closeRequested, navigation]);

  const willLeavePage = useCallback(
    (event: { preventDefault: () => void }) => { // idk how to type this event... 
      if (paused) return;

      event.preventDefault(); // it will prevent user to go back and update states
      setPaused(true);
      setCloseRequest(true); // And here is a state to call navigation.goBack() when video is paused
    },
    [state.play]
  );

  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', willLeavePage);
    return unsubscribe;
  }, [navigation, willLeavePage]);

And last I pause the video when user is sliding the page left-to-right, to close it:

  useEffect(() => {
    const unsubscribe = navigation.addListener('transitionStart', () => { setPause(true); });
    return unsubscribe;
  }, [navigation]);

It's such an ugly code, but it works fine 🤷🏻‍♂️

fluorescent23 commented 1 year ago

I solved this problem by giving detachPreviousScreen: false screen option to either all the screens you can navigate to from the screen you are showing the video on, or to the entire navigator created with react-navigation.

Lakshyakatarmal commented 1 year ago

I solved this problem by giving detachPreviousScreen: false screen option to either all the screens you can navigate to from the screen you are showing the video on, or to the entire navigator created with react-navigation.

Thanks for the solution, it worked for me. 👍

c-info commented 1 year ago

I solved this problem by giving detachPreviousScreen: false screen option to either all the screens you can navigate to from the screen you are showing the video on, or to the entire navigator created with react-navigation.

thanks for the solutions I solved it by

detachInactiveScreens={false}

inside drawer navigator

xuanmai-agilityio commented 1 year ago

This prop is not available in NativeStackNavigator. Any help?

batuhank4 commented 3 weeks ago

Switching from @react-navigation/native-stack to @react-navigation/stack solved my problem. Thank you for everything.

TheWidlarzGroup / react-native-video

Video pausing and possibly unmounting when navigating away from screen using react navigation (but not pausing on iOS) #2448

Bug

Platform

Environment info

Steps To Reproduce

Expected behaviour

Reproducible sample code

Video sample

Bug

Platform

Environment info

Steps To Reproduce

Expected behaviour

Reproducible sample code

Video sample

Bug

Platform

Environment info

Steps To Reproduce

Expected behaviour

Reproducible sample code

Video sample