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
125 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

# 134,809
Objecti...
React N...
nextjs
GraphQL
9 commits
# 1,553
React
React N...
iOS
TypeScr...
3 commits
# 218,386
JavaScr...
React
faceid
Objecti...
2 commits
# 318,815
JavaScr...
oauth
React N...
2 commits
# 6,283
Objecti...
React N...
iOS
React
1 commit
# 26,737
Kotlin
Shell
Objecti...
univers...
1 commit
# 135,117
Node.js
serverl...
OCaml
axios
1 commit
# 350,611
JavaScr...
rxjs
cyclejs
Shell
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.