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

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

1. 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.

[qhoarau]

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

1. 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

[hirbod]

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.