Skip to main content

​
expo-keep-awake

Version: 55.0.3 Provides a React component that prevents the screen from sleeping when rendered. It also exposes static methods to control the behavior imperatively.

​
Installation

npx expo install expo-keep-awake

​
Usage

​
Component-Based

import { KeepAwake } from 'expo-keep-awake';
import { View, Text } from 'react-native';

function VideoPlayer() {
  return (
    <View>
      <KeepAwake />
      <Text>Screen will stay awake while this component is mounted</Text>
    </View>
  );
}

​
Hook-Based

import { useKeepAwake } from 'expo-keep-awake';
import { View, Text } from 'react-native';

function VideoPlayer() {
  useKeepAwake();
  
  return <Text>Screen will stay awake</Text>;
}

​
Imperative API

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

// Activate
activateKeepAwake();

// Deactivate
deactivateKeepAwake();

​
API Reference

​
Component

​
<KeepAwake />
React.Component
Renders a component that prevents screen from sleeping
<KeepAwake />
Automatically activates when mounted and deactivates when unmounted.

​
Hook

​
useKeepAwake(tag?)
(tag?: string) => void
Hook that keeps screen awake while component is mounted
useKeepAwake('video-player');
Optional tag parameter allows multiple independent keep-awake instances.

​
Methods

​
activateKeepAwake(tag?)
(tag?: string) => void
Activates keep-awake mode
import { activateKeepAwake } from 'expo-keep-awake';

activateKeepAwake('my-tag');
​
deactivateKeepAwake(tag?)
(tag?: string) => void
Deactivates keep-awake mode
import { deactivateKeepAwake } from 'expo-keep-awake';

deactivateKeepAwake('my-tag');

​
Examples

​
Video Player

import { useKeepAwake } from 'expo-keep-awake';
import { Video } from 'expo-av';
import { useState } from 'react';

function VideoPlayer({ source }) {
  const [isPlaying, setIsPlaying] = useState(false);
  
  // Keep screen awake only while video is playing
  if (isPlaying) {
    useKeepAwake();
  }
  
  return (
    <Video
      source={source}
      onPlaybackStatusUpdate={(status) => {
        setIsPlaying(status.isPlaying ?? false);
      }}
    />
  );
}

import { KeepAwake } from 'expo-keep-awake';
import { View, Text } from 'react-native';
import MapView from 'react-native-maps';

function NavigationScreen() {
  return (
    <View style={{ flex: 1 }}>
      <KeepAwake />
      <MapView style={{ flex: 1 }} />
      <Text>Screen stays on during navigation</Text>
    </View>
  );
}

​
Conditional Keep Awake

import { useKeepAwake } from 'expo-keep-awake';
import { View, Switch, Text } from 'react-native';
import { useState } from 'react';

function SettingsScreen() {
  const [keepScreenOn, setKeepScreenOn] = useState(false);
  
  if (keepScreenOn) {
    useKeepAwake();
  }
  
  return (
    <View>
      <Text>Keep Screen On</Text>
      <Switch value={keepScreenOn} onValueChange={setKeepScreenOn} />
    </View>
  );
}

​
Imperative Control

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

class MediaPlayer {
  play() {
    activateKeepAwake('media-player');
    // Start playback...
  }
  
  pause() {
    deactivateKeepAwake('media-player');
    // Pause playback...
  }
  
  stop() {
    deactivateKeepAwake('media-player');
    // Stop playback...
  }
}

​
Multiple Instances with Tags

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

function VideoPlayer() {
  useEffect(() => {
    activateKeepAwake('video');
    return () => deactivateKeepAwake('video');
  }, []);
  
  return <Video />;
}

function AudioPlayer() {
  useEffect(() => {
    activateKeepAwake('audio');
    return () => deactivateKeepAwake('audio');
  }, []);
  
  return <Audio />;
}

// Both can be active independently
function App() {
  return (
    <>
      <VideoPlayer />
      <AudioPlayer />
    </>
  );
}

​
Reading Mode

import { useKeepAwake } from 'expo-keep-awake';
import { ScrollView, Text } from 'react-native';

function Article({ content }) {
  // Keep screen on while reading
  useKeepAwake('reading');
  
  return (
    <ScrollView>
      <Text>{content}</Text>
    </ScrollView>
  );
}

​
Camera Preview

import { KeepAwake } from 'expo-keep-awake';
import { CameraView } from 'expo-camera';

function CameraScreen() {
  return (
    <>
      <KeepAwake />
      <CameraView style={{ flex: 1 }} />
    </>
  );
}

​
TypeScript

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

// Hook with optional tag
useKeepAwake('my-tag');

// Imperative with tag
activateKeepAwake('my-tag');
deactivateKeepAwake('my-tag');

​
Platform Support

PlatformSupported
iOS✅
Android✅
Web✅

​
How It Works

  • iOS: Sets UIApplication.shared.isIdleTimerDisabled = true
  • Android: Adds FLAG_KEEP_SCREEN_ON to the window
  • Web: Uses Wake Lock API or NoSleep.js fallback

​
Best Practices

  1. Use Component/Hook: Prefer <KeepAwake /> or useKeepAwake() for automatic cleanup
  2. Clean Up: Always deactivate when no longer needed to save battery
  3. Use Tags: Use unique tags for multiple independent instances
  4. Conditional Usage: Only activate when actually needed (e.g., during video playback)
  5. User Control: Consider letting users disable keep-awake in settings
Keeping the screen on drains battery faster. Only use when necessary for user experience.

​
Resources