https://github.com/oojr/react-native-battery

plugin for react native that adds an listener for the battery status of a device
https://github.com/oojr/react-native-battery

Last synced: about 1 month ago
JSON representation

plugin for react native that adds an listener for the battery status of a device

• Host: GitHub
• URL: https://github.com/oojr/react-native-battery
• Owner: oojr
• Created: 2015-09-16T04:31:37.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-02-04T10:04:47.000Z (almost 5 years ago)
• Last Synced: 2024-04-26T03:35:33.162Z (9 months ago)
• Language: Java
• Size: 243 KB
• Stars: 51
• Watchers: 5
• Forks: 25
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-battery ★30 - A React Native module that returns the battery level/status of a device (Components / System)
• awesome-react-native-native-modules - react-native-battery ★20
• awesome-react-native - react-native-battery ★30 - A React Native module that returns the battery level/status of a device (Components / System)
• awesome-react-native - react-native-battery ★30 - A React Native module that returns the battery level/status of a device (Components / System)
• awesome-react-native - react-native-battery ★30 - A React Native module that returns the battery level/status of a device (Components / System)
• awesome-react-native-ui - react-native-battery ★12 - A React Native module that returns the battery level/status of a device (Components / System)

README

        
# react-native-battery

A cross-platform React Native module that returns the battery level/status of a device. Supports iOS and Android.

## Package Installation

`npm install react-native-battery --save`

### iOS automatic setup

*   `react-native link react-native-battery`

### Android setup

*   `react-native link react-native-battery` may work, but it sometimes munges files. If automatic installation fails, use the following manual steps.

*   Add to `MainApplication.java`:

```

import com.rctbattery.BatteryManagerPackage;

// ...

@Override

protected List getPackages() {

  return Arrays.asList(

      new MainReactPackage(),

        new BatteryManagerPackage(),

        // ...

  );

}

```

*   Add to `android/settings.gradle`:

```

include ':react-native-battery'

project(':react-native-battery').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-battery/android')

//...

```

*   Add to `android/app/build.gradle`:

```

dependencies {

  compile project(':react-native-battery')

  //...

}

```

## Example

```javascript

'use strict';

var React = require('react-native');

var BatteryManager = require('NativeModules').BatteryManager;

var {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  DeviceEventEmitter,

} = React;

var RCTBattery = React.createClass({

  getInitialState: function() {

    return {batteryLevel: null, charging:false};

  },

  onBatteryStatus: function(info){

    this.setState({batteryLevel: info.level});

    this.setState({charging: info.isPlugged});

  },

  componentDidMount: function(){

    BatteryManager.updateBatteryLevel(function(info){

      this._subscription = DeviceEventEmitter.addListener('BatteryStatus', this.onBatteryStatus);

      this.setState({batteryLevel: info.level});

      this.setState({charging: info.isPlugged});

    }.bind(this));

  },

  componentWillUnmount: function(){

    this._subscription.remove();

  },

  render: function() {

    var chargingText;

    if(this.state.charging){

      chargingText =Charging ;

    } else {

      chargingText =Not Charging ;

    }

    return (

      

        

          Battery Level {this.state.batteryLevel}

        

        {chargingText}

      

    );

  }

});

var styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

AppRegistry.registerComponent('RCTBattery', () => RCTBattery);

```