Screen sleeps in android according to device settings while video is playing

[pratik-yadav-cvent]

Describe the bug In Android screen gets locked during video playback if the device setting has the auto locked option enabled. If user don't do any interaction then it gets auto locked.

To reproduce Just reduce the time auto screen lock time from device settings and play the video and wait for sometime it will get autolocked

Expected behavior Screen should not get auto-locked while video is in play state

Device (please complete the following information):

• Device: Android all devices

[maxstoller]

Hi @pratik-yadav-cvent, you should be able to control this behavior in your application by using the FLAG_KEEP_SCREEN_ON flag. Hope this helps.

[pratik-yadav-cvent]

Hi @maxstoller , I want this behaviour for a single screen in app not for the whole. Basically, i want to keep the screen awake in video playback mode.

[dawhitla]

Hi @pratik-yadav-cvent would https://www.npmjs.com/package/@sayem314/react-native-keep-awake meet your needs?

[Bowlerr]

I've written some native code which I've got working in the latest version of React Native.

These scripts exist under: android/app/src/main/java/com/APPNAME/keepawake

`/*
 * keepawake/KeepScreenAwakeModule.kt
 * React Native module for enabling and disabling screen awake functionality on Android.
 *
 * This module provides methods to control the screen awake behavior, allowing an app to
 * keep the screen on and prevent it from dimming or turning off due to inactivity.
 *
 * Written by Bowlerr
 */

package com.APPNAME.keepawake

import android.os.Build
import android.view.WindowManager
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

class KeepScreenAwakeModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String {
        return "KeepScreenAwakeModule"
    }


    // Enable keeping the screen awake
    @ReactMethod
    fun enableKeepScreenAwake() {
        currentActivity?.let { activity ->

            // Set appropriate window flags to keep the screen on
            activity.runOnUiThread {
                activity.window?.addFlags(
                    // Keep the screen on
                    WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
                )
            }
        }
    }

    // Disable keeping the screen awake
    @ReactMethod
    fun disableKeepScreenAwake() {
        currentActivity?.let { activity ->

            // Clear window flags to allow the screen to follow normal behavior
                activity.window?.clearFlags(
                    // Keep the screen on
                    WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
                )
            }
        }
    }

}
`

/*
 * keepawake/KeepScreenAwakePackage.kt
 * React Native Package for enabling and disabling screen awake functionality on Android.
 *
 * This Package provides methods to control the screen awake behavior, allowing an app to
 * keep the screen on and prevent it from dimming or turning off due to inactivity.
 *
 * Written by Bowlerr
 */

package com.APPNAME.keepawake

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager

// Create a ReactPackage responsible for providing the KeepScreenAwakeModule to the React Native bridge
class KeepScreenAwakePackage : ReactPackage {

    override fun createNativeModules(
        reactContext: ReactApplicationContext
    ): MutableList<NativeModule> = listOf(KeepScreenAwakeModule(reactContext)).toMutableList()

    // Implement the createViewManagers method to return an empty list of ViewManager instances
    override fun createViewManagers(
        reactContext: ReactApplicationContext
    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()
}

in MainApplication.java import your new package: import com.APPNAME.keepawake.*; then add it to our react packages:

`@Override
              protected List<ReactPackage> getPackages() {
                  @SuppressWarnings("UnnecessaryLocalVariable")
                  List<ReactPackage> packages = new PackageList(this).getPackages();
                  // below KeepScreenAwakePackage is added to the list of packages returned
                  packages.add(new KeepScreenAwakePackage());
                  return packages;
              }`

We now need to enable the permissions for this in the AndroidManifest.xml

`
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.WAKE_LOCK" />
...
</manifest>`

If you get any build errors, I did have to enable kotlin: in app/build.gradle apply plugin: 'kotlin-android'

To use this native module we can create a hook:

`/*
  useKeepScreenAwake.ts

  A custom hook that enables the "Keep Screen Awake" functionality on Android.
  It uses the KeepScreenAwakeModule to prevent the screen from dimming or turning off.

  Usage:
  useKeepScreenAwake();

  Note: This hook only applies to Android. On other platforms, it does nothing.

  Written by Bowlerr
*/

import { useEffect } from 'react';
import { Platform, NativeModules } from 'react-native';

// Check if KeepScreenAwakeModule is available on Android
const keepScreenAwakeModule =
    Platform.OS === 'android' ? NativeModules.KeepScreenAwakeModule : null;

/**
 * The `useKeepScreenAwake` function is a custom hook in TypeScript that enables screen awake on
 * Android using the `keepScreenAwakeModule` if available, and returns a cleanup function to disable
 * screen awake.
 */
const useKeepScreenAwake = () => {
    useEffect(() => {
        // Enable screen awake on Android if KeepScreenAwakeModule is available
        const enable = () => keepScreenAwakeModule?.enableKeepScreenAwake?.();
        const disable = () => {
            keepScreenAwakeModule?.disableKeepScreenAwake?.();
        };

        // Run the enable function when the component mounts
        enable();

        // Return a cleanup function to disable screen awake
        return disable;
    }, []); // Run this effect only once
};

export default useKeepScreenAwake;
`

You can then use this hook whenever you use the IVSPlayer and then iOS and Android behaviour should match ! :)

I hope you find this helpful. feel free to ask any questions.

[Bowlerr]

Ah it seems like that package does the same!