Skip to content

codalyze/react-native-status-bar-size

 
 

Repository files navigation

react-native-status-bar-height

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

Add it to your project

  1. Run npm install react-native-status-bar-size --save
  2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot).
  3. Add libRNStatusBarSize.a to Build Phases -> Link Binary With Libraries (Screenshot).
  4. 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>
     );
   },
});

Demo gif

TODOS

  • [ x ] Update it after device rotation event (Fixed on 0.2.3)

About

Watch and respond to changes in the iOS status bar height

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.3%
  • Objective-C 47.7%