Need help with react-native-status-bar-size?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jgkim
124 Stars 33 Forks 39 Commits 5 Opened issues

Description

Watch and respond to changes in the iOS status bar height

Services available

!
?

Need anything else?

Contributors list

react-native-status-bar-size

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. 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 ( Current status bar height is: {this.state.currentStatusBarHeight} ); }, });

Demo gif

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.