Skip to content

Repository files navigation

@jeongshin/react-native-keep-awake

Keep the screen awake in React Native apps. Built as a Turbo Module for the New Architecture (React Native 0.76+, tested on 0.86).

Inspired by expo-keep-awake and @sayem314/react-native-keep-awake, without the Expo modules dependency.

  • iOS: toggles UIApplication.idleTimerDisabled
  • Android: toggles FLAG_KEEP_SCREEN_ON on the current activity window (re-applied automatically when the activity is recreated)
  • Tag-based reference counting: the screen stays awake while at least one tag is active, so independent features (player, upload, reading mode, ...) never release each other's lock

Installation

npm install @jeongshin/react-native-keep-awake
# or
yarn add @jeongshin/react-native-keep-awake

Then rebuild your app (pod install for iOS).

Requires the New Architecture. There is no legacy (Paper) implementation.

Usage

Hook

Keeps the screen awake while the component is mounted:

import { useKeepAwake } from '@jeongshin/react-native-keep-awake';

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

Each useKeepAwake() instance uses its own unique tag by default, so multiple screens/components can use it concurrently — the screen sleeps again only after the last one unmounts.

Component

import { KeepAwake } from '@jeongshin/react-native-keep-awake';

function Screen({ isPlaying }: { isPlaying: boolean }) {
  return (
    <>
      {isPlaying && <KeepAwake />}
      {/* ... */}
    </>
  );
}

Imperative API

import {
  activateKeepAwake,
  deactivateKeepAwake,
} from '@jeongshin/react-native-keep-awake';

activateKeepAwake('download');
// ... long running work ...
deactivateKeepAwake('download');

activate/deactivate calls with the same tag are idempotent (a tag is either active or not — activating twice does not require deactivating twice). Calling without a tag uses a shared default tag.

API

Export Description
useKeepAwake(tag?: string) Keeps the screen awake while mounted. Uses a unique tag per hook instance unless tag is given.
<KeepAwake tag?: string /> Component wrapper around useKeepAwake. Renders nothing.
activateKeepAwake(tag?: string) Prevents the screen from sleeping until the same tag is deactivated.
deactivateKeepAwake(tag?: string) Releases the lock held by tag.
DEFAULT_KEEP_AWAKE_TAG Tag used when none is provided.

Contributing

License

MIT


Made with create-react-native-library

About

Keep the screen awake in React Native apps (New Architecture, Turbo Module)

Topics

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages