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 6 Opened issues

Description

Watch and respond to changes in the iOS status bar height

Services available

!
?

Need anything else?

Contributors list

# 129,256
Objecti...
iOS
nextjs
GraphQL
9 commits
# 1,485
React
React N...
TypeScr...
Objecti...
3 commits
# 210,806
React
Java
samsung
faceid
2 commits
# 309,305
JavaScr...
oauth
React N...
2 commits
# 6,128
Objecti...
React N...
iOS
React
1 commit
# 23,929
Shell
C
Objecti...
univers...
1 commit
# 136,741
datasto...
serverl...
OCaml
Shell
1 commit
# 341,875
rxjs
cyclejs
Shell
CSS
1 commit

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.