The react-native-status-bar-size from hans8831

react-native-status-bar-size's Introduction

react-native-status-bar-height

Watch and respond to changes in the iOS status bar height.

Add it to your project

Run npm install react-native-status-bar-size --save
Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot).
Add libRNStatusBarSize.a to Build Phases -> Link Binary With Libraries (Screenshot).
Follow the example below to use it in JS

Deprecated `change` Event

The change event has been deprecated. The didChange event should be used instead. It's still available but may be removed in a later version.

Example

var MyApp = React.createClass({
   getInitialState: function() {
     return {
       currentStatusBarHeight: StatusBarSizeIOS.currentHeight,
     };
   },

   componentDidMount: function() {
     StatusBarSizeIOS.addEventListener('willChange', this._handleStatusBarSizeWillChange);
     StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange);
   },

   componentWillUnmount: function() {
     StatusBarSizeIOS.removeEventListener('willChange', this._handleStatusBarSizeWillChange);
     StatusBarSizeIOS.removeEventListener('didChange', this._handleStatusBarSizeDidChange);
   },

   _handleStatusBarSizeWillChange: function(nextStatusBarHeight) {
     console.log('Will Change: ' + nextStatusBarHeight);
   },

   _handleStatusBarSizeDidChange: function(currentStatusBarHeight) {
     console.log('changed');
     this.setState({ currentStatusBarHeight: currentStatusBarHeight });
   },

   render: function() {
     return (
       <View style={{flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
         <Text>Current status bar height is: {this.state.currentStatusBarHeight}</Text>
       </View>
     );
   },
});