React Freeze Causes Playback to Continue (react-native-video)

[swushi]

Hi! 👋

Firstly, thanks for your work on this project!

Today I used patch-package to patch react-native-screens@3.13.1 for the project I'm working on.

I work on a social media app that has a list of Audio/Video components. We stop playback for those components based on a couple of conditions, one of them being lack of focus on the screen. When trying to incorporate react-freeze, the component would be frozen, with playback still going, before knowing it had lost focus. Thus we would have many pieces of playback playing concurrently.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-screens/src/index.native.tsx b/node_modules/react-native-screens/src/index.native.tsx
index 35ce64c..ff1bdb7 100644
--- a/node_modules/react-native-screens/src/index.native.tsx
+++ b/node_modules/react-native-screens/src/index.native.tsx
@@ -167,11 +167,13 @@ function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
   const [freezeState, setFreezeState] = React.useState(false);
 
   if (freeze !== freezeState) {
-    // setImmediate is executed at the end of the JS execution block.
-    // Used here for changing the state right after the render.
-    setImmediate(() => {
+    // setTimeout is executed at the end of the JS execution block.
+    // Used here for changing the state with a slight delay.
+    // This timeout allows playback from audio/videos to stop playing before being frozen with playback.
+    setTimeout(() => {
       setFreezeState(freeze);
-    });
+    }, 100);
   }
 
   return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;

This issue body was partially generated by patch-package.

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Steps To Reproduce, Reproduction and Platform sections.

[hirbod]

@swushi one of the reasons why I don't like react-native-video and switched over to expo-av is that expo-av is way more stable and it provides an API (pauseAsync(),stopAsync(),loadAsync() and unloadAsync()). RNV has only support for changing playback via state.

I am able to pause playback with the API using my focus side effects while having enableFreeze active.

[WoLewicki]

Can you provide a repro of the issue so we can work on it and check what is the source of the problem?

[WoLewicki]

As @hirbod mentioned, react-freeze works now in a way that it allows one re-render before applying freeze on the previous screen, which results in changing value of useIsFocused. You can use this value to apply your changes as long as they don't need more re-renders to take effect since they will be already frozen. Your workaround can be dangerous, what if you navigated forward and then back before 100ms pass? Wouldn't it result in unresponsive screen you would be at since it would be frozen after you went back to it?