Mastering Keep Awake in React Native: A Step-by-Step Guide

What is Keep Awake?

Keep awake, also known as wake lock, is a feature that prevents a device from going to sleep when an application needs to perform a continuous task. This ensures that the device remains active, even if the user is not interacting with it.

Implementing Keep Awake in React Native

To implement keep awake in React Native, we can use the expo-keep-awake package. This package provides two options for activating keep awake:

• useKeepAwake: This hook enables wake lock when the component where it’s used is mounted. However, the wake lock is released when the component is unmounted.
• activateKeepAwake: When this function is called, it requests a wake lock. Its inverse function is deactivateKeepAwake, which releases the wake lock.

Using the useKeepAwake Hook

The useKeepAwake hook is a convenient way to enable keep awake in a component. However, it’s essential to use it only in the component where it’s needed, as it can lead to unintended behavior if used excessively.

import { useKeepAwake } from 'expo-keep-awake';

function MyComponent() {
  useKeepAwake();
  //...
}

Using the activateKeepAwake Function

The activateKeepAwake function provides more control over when to activate and deactivate keep awake. We can use it to create a playback status state and update it based on the video playback status.

import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';

function MyComponent() {
  const [playbackStatus, setPlaybackStatus] = useState(false);

  useEffect(() => {
    if (playbackStatus) {
      activateKeepAwake();
    } else {
      deactivateKeepAwake();
    }
  }, [playbackStatus]);

  //...
}

Example Project: Video Player

To demonstrate the use of keep awake, we’ll create a basic video player application using React Native. We’ll use the expo-av package to play videos and the expo-keep-awake package to enable keep awake.

import { Video } from 'expo-av';
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';

function VideoPlayer() {
  const [playbackStatus, setPlaybackStatus] = useState(false);
  const videoRef = React.createRef();

  useEffect(() => {
    if (playbackStatus) {
      activateKeepAwake();
    } else {
      deactivateKeepAwake();
    }
  }, [playbackStatus]);

  const handlePlay = () => {
    setPlaybackStatus(true);
    videoRef.current.playAsync();
  };

  const handlePause = () => {
    setPlaybackStatus(false);
    videoRef.current.pauseAsync();
  };

  return (
    
      
    
  );
}

Caching Videos

To improve performance, we can cache videos using the expo-file-system module. This ensures that the video is not repeatedly downloaded from the server.

import * as FileSystem from 'expo-file-system';

const cacheVideo = async (uri) => {
  const cachedVideoPath = `${FileSystem.cacheDirectory}video.mp4`;
  const videoExists = await FileSystem.getInfoAsync(cachedVideoPath);

  if (!videoExists.exists) {
    await FileSystem.downloadAsync(uri, cachedVideoPath);
  }

  return cachedVideoPath;
};