How to check battery level and percentage of android and ios device in React Native

How to check battery level and percentage of android and ios device in React Native

To check the battery level in react native we can use NPM package ( react-native-device-info ). The documentation of this package is very easy. In this tutorial we will learn how to check battery level of a android and ios device using this package. Below is the setups you need to follow:-

1.) Install the react-native-device-info package

Using npm:

npm install --save react-native-device-info
<strong>or using yarn:</strong>
<pre class="EnlighterJSRAW">yarn add react-native-device-info
</pre>
<p>Next you need to run below command to link the package for android and ios</p>
<pre class="EnlighterJSRAW">react-native link react-native-device-info
</pre>
<h4>Usage</h4>
<p>Now import the package like below</p>
<pre class="EnlighterJSRAW">import DeviceInfo from 'react-native-device-info';
</pre>
<h4>Get Battery Level</h4>
<pre class="EnlighterJSRAW">componentDidMount = () => {
     DeviceInfo.getBatteryLevel().then((batteryLevel) => {
        console.log(batteryLevel);
      });
}
</pre>
<p>this will give you value like this:-</p>
<p>0.4923434545 = 49%<br>
0.5 = 50%</p>
<p>0.054747564 = 5%</p>
<p>1 = 100%</p>
<p>I hope this will help  you</p>
<div class="seo_posts">
          <a href="https://vrsoftcoder.com/how-to-use-cloud-scheduler-api-to-submit-your-sitemap-xml-to-google-search-console-using-a-service-account/">How to use Cloud Scheduler API to submit your sitemap.xml to Google Search Console using a Service Account</a><br><a href="https://vrsoftcoder.com/horizontal-live-event-cards-with-image-and-gradient-react-native/">Horizontal Live Event Cards with Image and Gradient – React Native</a><br><a href="https://vrsoftcoder.com/react-native-tabs-in-single-file-and-split-files/">React Native Tabs in Single File and Split Files</a><br><a href="https://vrsoftcoder.com/react-native-list-with-grid-consisting-of-icons-and-text/">React Native List with Grid consisting of Icons and Text</a><br><a href="https://vrsoftcoder.com/react-native-cart-system/">React Native Cart System</a><br>        </div><div class="post-views post-6880 entry-meta">
        <span class="post-views-icon dashicons dashicons-chart-bar"></span>
        <span class="post-views-label">Post Views:</span>
        <span class="post-views-count">737</span>
      </div><!-- CONTENT END 1 -->
<strong>or using yarn:</strong>
<pre class="EnlighterJSRAW">yarn add react-native-device-info
</pre>
<p>Next you need to run below command to link the package for android and ios</p>
<pre class="EnlighterJSRAW">react-native link react-native-device-info
</pre>
<h4>Usage</h4>
<p>Now import the package like below</p>
<pre class="EnlighterJSRAW">import DeviceInfo from 'react-native-device-info';
</pre>
<h4>Get Battery Level</h4>
<pre class="EnlighterJSRAW">componentDidMount = () => {
     DeviceInfo.getBatteryLevel().then((batteryLevel) => {
        console.log(batteryLevel);
      });
}
</pre>
<p>this will give you value like this:-</p>
<p>0.4923434545 = 49%<br>
0.5 = 50%</p>
<p>0.054747564 = 5%</p>
<p>1 = 100%</p>
<p>I hope this will help  you</p>
<div class="seo_posts">
          <a href="https://vrsoftcoder.com/how-to-use-cloud-scheduler-api-to-submit-your-sitemap-xml-to-google-search-console-using-a-service-account/">How to use Cloud Scheduler API to submit your sitemap.xml to Google Search Console using a Service Account</a><br><a href="https://vrsoftcoder.com/horizontal-live-event-cards-with-image-and-gradient-react-native/">Horizontal Live Event Cards with Image and Gradient – React Native</a><br><a href="https://vrsoftcoder.com/react-native-tabs-in-single-file-and-split-files/">React Native Tabs in Single File and Split Files</a><br><a href="https://vrsoftcoder.com/react-native-list-with-grid-consisting-of-icons-and-text/">React Native List with Grid consisting of Icons and Text</a><br><a href="https://vrsoftcoder.com/react-native-cart-system/">React Native Cart System</a><br>        </div><div class="post-views post-6880 entry-meta">
        <span class="post-views-icon dashicons dashicons-chart-bar"></span>
        <span class="post-views-label">Post Views:</span>
        <span class="post-views-count">737</span>
      </div><!-- CONTENT END 1 -->
or using yarn:
yarn add react-native-device-info
yarn add react-native-device-info
yarn add react-native-device-info

Next you need to run below command to link the package for android and ios
react-native link react-native-device-info
react-native link react-native-device-info
react-native link react-native-device-info

Usage
Now import the package like below
import DeviceInfo from 'react-native-device-info';
import DeviceInfo from 'react-native-device-info';
import DeviceInfo from 'react-native-device-info';

Get Battery Level
componentDidMount = () => {
     DeviceInfo.getBatteryLevel().then((batteryLevel) => {
        console.log(batteryLevel);
      });
}
componentDidMount = () => {
     DeviceInfo.getBatteryLevel().then((batteryLevel) => {
        console.log(batteryLevel);
      });
}
componentDidMount = () => {
     DeviceInfo.getBatteryLevel().then((batteryLevel) => {
        console.log(batteryLevel);
      });
}

this will give you value like this:-
0.4923434545 = 49%

0.5 = 50%
0.054747564 = 5%
1 = 100%
I hope this will help  you

					How to use Cloud Scheduler API to submit your sitemap.xml to Google Search Console using a Service Account
Horizontal Live Event Cards with Image and Gradient – React Native
React Native Tabs in Single File and Split Files
React Native List with Grid consisting of Icons and Text
React Native Cart System
				

				
				Post Views:
				737