@metasora/react-native-screen-utils

Screen awake and brightness control for React Native, with React Navigation hooks out of the box.

Built by Metasora · metasora.com

Use Cases

Navigation & Maps

When building navigation or map screens in React Native, users often need the screen to stay fully visible at maximum brightness — for example, following turn-by-turn directions while driving. This package handles that automatically:

• Keep the screen awake so it doesn't lock while the user is navigating
• Maximize brightness while the navigation screen is active, then restore the previous brightness when the user leaves

Just drop in the hooks and your navigation screen handles the rest.

QR Code & Barcode Scanning

Bright screens scan faster. When users open a scanner screen, maximize brightness so the camera can read codes even in low-light environments — then restore their preferred brightness when they're done.

Media & Video Playback

Prevent the screen from locking during video playback, live streams, or video calls without requiring users to manually adjust their device's auto-lock settings.

Features

• ScreenAwake — Prevent the screen from dimming or locking
• ScreenBrightness — Set, get, and reset screen brightness
• React Navigation Hooks — useScreenAwake and useScreenBrightness for automatic lifecycle management
• Bridge Compatible — Works with both Old and New Architecture via RN interop layer
• Zero Config — Autolinking on both platforms, no native setup required

Installation

# npm
npm install @metasora/react-native-screen-utils

# yarn
yarn add @metasora/react-native-screen-utils

# pnpm
pnpm add @metasora/react-native-screen-utils

# bun
bun add @metasora/react-native-screen-utils

iOS

cd ios && pod install

Android

No additional steps — autolinking handles everything.

Usage

Screen Awake

import { ScreenAwake } from '@metasora/react-native-screen-utils';

ScreenAwake.activate();
ScreenAwake.deactivate();

Screen Brightness

import { ScreenBrightness } from '@metasora/react-native-screen-utils';

await ScreenBrightness.setBrightness(1.0);    // Max brightness
const level = await ScreenBrightness.getBrightness();
ScreenBrightness.resetBrightness();            // Restore system default

React Navigation Hooks

Hooks activate on screen focus and clean up on blur automatically.

import { useScreenAwake, useScreenBrightness } from '@metasora/react-native-screen-utils';

function MapScreen() {
  useScreenAwake();         // Keep screen on while viewing
  useScreenBrightness();    // Max brightness while focused, restores on blur

  return <MapView />;
}

Note: Hooks require @react-navigation/native as a peer dependency.

API Reference

ScreenAwake

| Method | Description | |--------|-------------| | activate() | Prevent the screen from sleeping | | deactivate() | Allow the screen to sleep normally |

ScreenBrightness

| Method | Description | |--------|-------------| | setBrightness(value) | Set brightness level (0.0 – 1.0) | | getBrightness() | Get current brightness. Android returns -1 for system default | | resetBrightness() | Reset to system default brightness |

Hooks

| Hook | Description | |------|-------------| | useScreenAwake() | Keeps screen awake while the screen is focused. Re-activates on app foreground | | useScreenBrightness() | Sets max brightness while focused. Saves and restores previous brightness on blur |

Requirements

• React Native 0.71+
• iOS 15.1+
• Android API 24+

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

MIT © Metasora