@ttwrpz/react-native-brightness-setting

A React Native library for controlling screen brightness on iOS and Android.

Features

• Get/Set system brightness
• Get/Set app-specific brightness (without affecting system settings)
• Screen mode control (Manual/Automatic) on Android
• Save/Restore brightness settings
• Permission handling for Android 6+
• TypeScript support

Installation

npm install @ttwrpz/react-native-brightness-setting

React Native 0.60+

For React Native 0.60+, the library will be auto-linked. Just run:

cd ios && pod install

Manual Installation

Android

1. Add to android/settings.gradle:

include ':@ttwrpz_react-native-brightness-setting'
project(':@ttwrpz_react-native-brightness-setting').projectDir = new File(rootProject.projectDir, '../node_modules/@ttwrpz/react-native-brightness-setting/android')

2. Add to android/app/build.gradle:

dependencies {
    implementation project(':@ttwrpz_react-native-brightness-setting')
}

3. Add to MainApplication.java:

import com.ttwrpz.settings.brightness.BrightnessSettingPackage;

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new BrightnessSettingPackage()  // Add this line
    );
}

iOS

1. Add to your Podfile:

pod 'RCTBrightnessSetting', :path => '../node_modules/@ttwrpz/react-native-brightness-setting'

2. Run pod install

Usage

import BrightnessSetting from '@ttwrpz/react-native-brightness-setting';

// Get current brightness (0.0 - 1.0)
const brightness = await BrightnessSetting.getBrightness();
console.log('Current brightness:', brightness);

// Set brightness (0.0 - 1.0)
const success = await BrightnessSetting.setBrightness(0.5);
if (!success) {
    // Permission denied - guide user to settings
    BrightnessSetting.grantWriteSettingPermission();
}

// Force set brightness (Android: switches to manual mode first)
await BrightnessSetting.setBrightnessForce(0.8);

// App-specific brightness (doesn't affect system settings)
BrightnessSetting.setAppBrightness(0.3);
const appBrightness = await BrightnessSetting.getAppBrightness();

// Save current brightness before making changes
await BrightnessSetting.saveBrightness();

// Restore previously saved brightness
const restoredValue = BrightnessSetting.restoreBrightness();

// Screen mode control (Android only)
const mode = await BrightnessSetting.getScreenMode();
// 0 = Manual, 1 = Automatic, -1 = Unknown/iOS

await BrightnessSetting.setScreenMode(
    BrightnessSetting.SCREEN_BRIGHTNESS_MODE_MANUAL
);

API

Methods

| Method | Description | Platform | Returns | |--------|-------------|----------|---------| | getBrightness() | Get current system brightness (0.0 - 1.0) | iOS, Android | Promise<number> | | setBrightness(val) | Set system brightness (0.0 - 1.0) | iOS, Android | Promise<boolean> | | setBrightnessForce(val) | Force set brightness (switches to manual mode on Android) | iOS, Android | Promise<boolean> | | getAppBrightness() | Get app-specific brightness | iOS, Android | Promise<number> | | setAppBrightness(val) | Set app-specific brightness (doesn't affect system) | iOS, Android | Promise<boolean> | | getScreenMode() | Get screen mode (0=manual, 1=auto, -1=unknown) | Android | Promise<number> | | setScreenMode(mode) | Set screen mode | Android | Promise<boolean> | | saveBrightness() | Save current brightness and mode | iOS, Android | Promise<void> | | restoreBrightness() | Restore saved brightness and mode | iOS, Android | number | | grantWriteSettingPermission() | Open permission settings page | Android | void |

Constants

| Constant | Value | Description | |----------|-------|-------------| | SCREEN_BRIGHTNESS_MODE_MANUAL | 0 | Manual brightness mode | | SCREEN_BRIGHTNESS_MODE_AUTOMATIC | 1 | Automatic brightness mode | | SCREEN_BRIGHTNESS_MODE_UNKNOWN | -1 | Unknown/unsupported mode |

Android Permissions

Add the following permission to your android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package.name">
    
    <!-- Required for setBrightness() and setScreenMode() -->
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    
    <application>
        <!-- Your app content -->
    </application>
</manifest>

Runtime Permission (Android 6+)

On Android 6.0+ (API level 23), the WRITE_SETTINGS permission requires user approval. If setBrightness() or setScreenMode() returns false, call grantWriteSettingPermission() to guide the user to the settings page.

const success = await BrightnessSetting.setBrightness(0.5);
if (!success) {
    Alert.alert(
        'Permission Required',
        'Please allow "Modify system settings" permission to control brightness.',
        [
            { text: 'Cancel', style: 'cancel' },
            { 
                text: 'Open Settings', 
                onPress: () => BrightnessSetting.grantWriteSettingPermission() 
            }
        ]
    );
}

Platform Differences

iOS

• setAppBrightness() and setBrightness() have the same effect
• getAppBrightness() and getBrightness() return the same value
• Screen mode methods always return success but don't actually change anything
• No permissions required

Android

• setAppBrightness() only affects the current app window
• setBrightness() affects system-wide brightness
• Requires WRITE_SETTINGS permission for system brightness control
• Screen mode control is fully supported

Example

import React, { useState, useEffect } from 'react';
import { View, Text, Slider, Switch, Alert, StyleSheet } from 'react-native';
import BrightnessSetting from '@ttwrpz/react-native-brightness-setting';

export default function BrightnessControl() {
    const [brightness, setBrightness] = useState(0.5);
    const [isAutoMode, setIsAutoMode] = useState(false);

    useEffect(() => {
        loadCurrentSettings();
    }, []);

    const loadCurrentSettings = async () => {
        try {
            const currentBrightness = await BrightnessSetting.getBrightness();
            const screenMode = await BrightnessSetting.getScreenMode();
            
            setBrightness(currentBrightness);
            setIsAutoMode(screenMode === BrightnessSetting.SCREEN_BRIGHTNESS_MODE_AUTOMATIC);
        } catch (error) {
            console.error('Failed to load brightness settings:', error);
        }
    };

    const handleBrightnessChange = async (value) => {
        setBrightness(value);
        
        const success = await BrightnessSetting.setBrightnessForce(value);
        if (!success) {
            Alert.alert(
                'Permission Required',
                'Please allow "Modify system settings" permission.',
                [
                    { text: 'Cancel', style: 'cancel' },
                    { 
                        text: 'Open Settings', 
                        onPress: () => BrightnessSetting.grantWriteSettingPermission() 
                    }
                ]
            );
        }
    };

    const handleAutoModeToggle = async (value) => {
        setIsAutoMode(value);
        
        const mode = value 
            ? BrightnessSetting.SCREEN_BRIGHTNESS_MODE_AUTOMATIC
            : BrightnessSetting.SCREEN_BRIGHTNESS_MODE_MANUAL;
            
        await BrightnessSetting.setScreenMode(mode);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Brightness Control</Text>
            
            <View style={styles.row}>
                <Text>Brightness: {Math.round(brightness * 100)}%</Text>
                <Slider
                    style={styles.slider}
                    value={brightness}
                    onValueChange={handleBrightnessChange}
                    minimumValue={0}
                    maximumValue={1}
                />
            </View>
            
            <View style={styles.row}>
                <Text>Auto Brightness</Text>
                <Switch
                    value={isAutoMode}
                    onValueChange={handleAutoModeToggle}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        justifyContent: 'center',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 30,
        textAlign: 'center',
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginVertical: 15,
    },
    slider: {
        flex: 1,
        marginLeft: 20,
    },
});

License

MIT