React Native Brightness Change Example


Share:
Published By: Admin, Published On: Jun 29, 2021, Category: React Native

Hi Guys,

In this blog,I will learn you how to use brightness change in react native. We will show example of brightness change in react native. You can easliy create react native brightness change. First i will import Brightness namespace from expo-brightness, after I will make brightness change using in react native.

Step 1 - Create project

In the first step Run the following command for create project.

expo init MyWebtuts 
Step 2 - Installation of Dependency

In the step, Run the following command for installation of dependency.

To use Brightness you need to install expo-brightness package.

To install this open the terminal and jump into your project

cd paper MyWebtuts 
Run the following command
yarn add expo-brightness
Step 3 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from "react";
import { Text, View,StyleSheet} from 'react-native';
import * as Brightness from 'expo-brightness';

const MyWebtutsComponent = () => {
    React.useEffect(() => {
        (async () => {
          const { status } = await Brightness.requestPermissionsAsync();
          if (status === 'granted') {
            Brightness.setSystemBrightnessAsync(1);
          }
        })();
      }, []);

    return (
    <View style={styles.mainbox}>
        <Text>React Native Brightness Change Exmaple</Text>
    </View>
  );
};


const styles = StyleSheet.create({
    mainbox:{
        margin:50,
    },

});
export default MyWebtutsComponent;
Step 3 - Run project

In the last step run your project using bellow command.

expo start
Output

It will help you...

Share: