Expo Screen Brightness Hook (with React Navigation)

use-max-brightness.hook.ts

/**
 * Screen brightness utility.
 */

import { useIsFocused } from "@react-navigation/core";
import * as Brightness from "expo-brightness";
import { useEffect, useState } from "react";
import { Platform } from "react-native";

/**
 * Set screen to max brightness when component is mounted and React Navigation screen is focused.
 *
 * NOTE: Can no longer use the system brightness methods on Android, but that
 * means permissions don't need to be requested: https://github.com/expo/expo/issues/22024
 */
export function useMaxBrightness(disabled?: boolean = false) {
	const [originalBrightness, setOriginalBrightness] = useState<number | null>(
		null
	);
	const isFocused = useIsFocused();

	const maxBrightness = async () => {
		if (originalBrightness !== null) return;

		console.log("Setting brightness to max...");

		// Save original brightness.
		const currentBrightness = await Brightness.getBrightnessAsync();
		setOriginalBrightness(currentBrightness);

		// Set brightness to max.
		await Brightness.setBrightnessAsync(1);
	};

	const resetBrightness = async () => {
		if (originalBrightness === null) return;

		console.log("Resetting brightness to original value...");

		if (Platform.OS === "android") {
			Brightness.restoreSystemBrightnessAsync();
		} else {
			Brightness.setBrightnessAsync(originalBrightness);
		}
		setOriginalBrightness(null);
	};

	useEffect(() => {
		if (disabled) {
			if (originalBrightness !== null) resetBrightness();
			return;
		}

		if (isFocused) {
			maxBrightness();
		} else {
			resetBrightness();
		}

		// Cleanup resets brightness to original value when component is unmounted.
		return () => {
			resetBrightness();
		};
	}, [disabled, isFocused]);
}

export default useMaxBrightness;