use-system-brightness.md

useSystemBrightness

Change or track the system screen brightness with Brightness

Other hooks   —   Usage   —   Changelog

expo install @use-expo/brightness expo-brightness

Usage

// full hook
const [brightness, setBrightness, getBrightness] = useSystemBrightness();

// other options
useSystemBrightness({ get: false });

Example

import { useSystemBrightness } from '@use-expo/brightness';
import { usePermissions } from '@use-expo/permissions';
import * as Permissions from 'expo-permissions';
import { Button, Linking, Slider, Text, View } from 'react-native';

function SystemBrightnessExample() {
    const [permission, askPermission] = usePermissions(Permissions.SYSTEM_BRIGHTNESS);
    const [brightness, setBrightness] = useSystemBrightness();

    if (permission?.status !== 'granted') {
        return (
            <View>
                <Text>We require permissions to set the system brightness</Text>
                {permission?.canAskAgain
                    ? <Button onPress={askPermission} title='Give permission' />
                    : <Button onPress={Linking.openSettings} title='Open app settings' />
                }
            </View>
        );
    }

    return (
        <View>
            <Text>System brightness:</Text>
            <Text>{percentage(brightness)}</Text>
            <Slider
                value={brightness}
                onValueChange={setBrightness}
                step={0.001}
                minimumValue={0.001}
                maximumValue={1}
            />
        </View>
    );
}

function percentage(level = 0) {
    return `${Math.floor(level * 1000) / 10}%`;
}

API

function useSystemBrightness(options?: Options): Result;

interface Options {
    /** If it should fetch the brightness when mounted, defaults to `true` */
    get?: boolean;
}

type Result = [
    /** The current system brightness */
    number | undefined,
    /** Callback to change the system brightness */
    (brightness: number) => Promise<void>,
    /** Callback to manually get the system brightness */
    () => Promise<void>,
];

with ❤️ byCedric