├── .gitignore ├── demo.gif ├── package.json ├── README.md └── StatusBarSizeIOS.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgkim/react-native-status-bar-size/HEAD/demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-status-bar-size", 3 | "version": "0.3.3", 4 | "description": "Watch and respond to changes in the iOS status bar height", 5 | "main": "StatusBarSizeIOS.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:jgkim/react-native-status-bar-size.git" 9 | }, 10 | "files": [ 11 | "StatusBarSizeIOS.js", 12 | "README.md" 13 | ], 14 | "author": "Brent Vatne (https://github.com/brentvatne/)", 15 | "contributors": [ 16 | "James G. Kim (https://jayg.org/)" 17 | ], 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## react-native-status-bar-size 2 | 3 | Watch and respond to changes in the iOS status bar height. 4 | 5 | ### Add it to your project 6 | 7 | 1. Run `npm install react-native-status-bar-size --save` 8 | 2. Follow the example below to use it in JS 9 | 10 | ### Deprecated `change` Event 11 | 12 | The `change` event has been deprecated. The `didChange` event should be used instead. 13 | It's still available but may be removed in a later version. 14 | 15 | ## Example 16 | 17 | ```javascript 18 | var MyApp = React.createClass({ 19 | getInitialState: function() { 20 | return { 21 | currentStatusBarHeight: StatusBarSizeIOS.currentHeight, 22 | }; 23 | }, 24 | 25 | componentDidMount: function() { 26 | StatusBarSizeIOS.addEventListener('willChange', this._handleStatusBarSizeWillChange); 27 | StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange); 28 | }, 29 | 30 | componentWillUnmount: function() { 31 | StatusBarSizeIOS.removeEventListener('willChange', this._handleStatusBarSizeWillChange); 32 | StatusBarSizeIOS.removeEventListener('didChange', this._handleStatusBarSizeDidChange); 33 | }, 34 | 35 | _handleStatusBarSizeWillChange: function(nextStatusBarHeight) { 36 | console.log('Will Change: ' + nextStatusBarHeight); 37 | }, 38 | 39 | _handleStatusBarSizeDidChange: function(currentStatusBarHeight) { 40 | console.log('changed'); 41 | this.setState({ currentStatusBarHeight: currentStatusBarHeight }); 42 | }, 43 | 44 | render: function() { 45 | return ( 46 | 47 | Current status bar height is: {this.state.currentStatusBarHeight} 48 | 49 | ); 50 | }, 51 | }); 52 | ``` 53 | 54 | ![Demo gif](https://raw.githubusercontent.com/jgkim/react-native-status-bar-size/master/demo.gif) 55 | -------------------------------------------------------------------------------- /StatusBarSizeIOS.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @providesModule StatusBarSizeIOS 3 | * @flow 4 | */ 5 | 'use strict'; 6 | 7 | const { NativeEventEmitter, StatusBarIOS, NativeModules } = require('react-native'); 8 | const { StatusBarManager } = NativeModules; 9 | 10 | var DEVICE_STATUS_BAR_HEIGHT_EVENTS = { 11 | willChange: 'statusBarFrameWillChange', 12 | didChange: 'statusBarFrameDidChange', 13 | change: 'statusBarFrameDidChange', 14 | }; 15 | 16 | var _statusBarSizeHandlers = {}; 17 | 18 | function getHandlers(type) { 19 | if (!_statusBarSizeHandlers[type]) { 20 | _statusBarSizeHandlers[type] = new Map(); 21 | } 22 | 23 | return _statusBarSizeHandlers[type]; 24 | } 25 | 26 | /** 27 | * `StatusBarSizeIOS` can tell you what the current height of the status bar 28 | * is, so that you can adjust your layout accordingly when a phone call 29 | * notification comes up, for example. 30 | * 31 | * ### Basic Usage 32 | * 33 | * To see the current height, you can check `StatusBarSizeIOS.currentHeight`, which 34 | * will be kept up-to-date. However, `currentHeight` will be null at launch 35 | * while `StatusBarSizeIOS` retrieves it over the bridge. 36 | * 37 | * ``` 38 | * getInitialState: function () { 39 | * return { 40 | * currentStatusBarHeight: StatusBarSizeIOS.currentHeight, 41 | * }; 42 | * }, 43 | * componentDidMount: function () { 44 | * StatusBarSizeIOS.addEventListener('willChange', this._handleStatusBarFrameWillChange); 45 | * StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarFrameDidChange); 46 | * }, 47 | * componentWillUnmount: function () { 48 | * StatusBarSizeIOS.removeEventListener('willChange', this._handleStatusBarFrameWillChange); 49 | * StatusBarSizeIOS.removeEventListener('didChange', this._handleStatusBarFrameDidChange); 50 | * }, 51 | * _handleStatusBarFrameWillChange: function (upcomingStatusBarHeight) { 52 | * console.log('Upcoming StatusBar Height:' + upcomingStatusBarHeight); 53 | * }, 54 | * _handleStatusBarFrameDidChange: function (currentStatusBarHeight) { 55 | * this.setState({ currentStatusBarHeight, }); 56 | * }, 57 | * render: function () { 58 | * return ( 59 | * Current status bar height is: {this.state.currentStatusBarHeight} 60 | * ); 61 | * }, 62 | * ``` 63 | * 64 | * Open up the phone call status bar in the simulator to see it change. 65 | */ 66 | 67 | var StatusBarSizeIOS = { 68 | 69 | /** 70 | * Add a handler to Status Bar size changes by listening to the event type 71 | * and providing the handler. 72 | * 73 | * Possible event types: change (deprecated), willChange, didChange 74 | */ 75 | addEventListener: function ( 76 | type: string, 77 | handler: (height: number) => mixed 78 | ) { 79 | getHandlers(type).set(handler, StatusBarIOS.addListener( 80 | DEVICE_STATUS_BAR_HEIGHT_EVENTS[type], 81 | (statusBarData) => { 82 | handler(statusBarData.frame.height); 83 | } 84 | )); 85 | }, 86 | 87 | /** 88 | * Remove a handler by passing the event type and the handler 89 | */ 90 | removeEventListener: function ( 91 | type: string, 92 | handler: (height: number) => mixed 93 | ) { 94 | const handlers = getHandlers(type); 95 | const listener = handlers.get(handler); 96 | 97 | if (listener) { 98 | listener.remove(); 99 | handlers.delete(handler); 100 | } 101 | }, 102 | 103 | currentHeight: (null : ?number), 104 | 105 | }; 106 | 107 | StatusBarIOS.addListener( 108 | DEVICE_STATUS_BAR_HEIGHT_EVENTS.didChange, 109 | (statusBarData) => { 110 | StatusBarSizeIOS.currentHeight = statusBarData.frame.height; 111 | } 112 | ); 113 | 114 | //Wrap in try catch to avoid error on android 115 | try { 116 | StatusBarManager.getHeight( 117 | (statusBarFrameData) => { 118 | StatusBarSizeIOS.currentHeight = statusBarFrameData.height; 119 | } 120 | ); 121 | } catch (e) { 122 | 123 | } 124 | 125 | module.exports = StatusBarSizeIOS; 126 | --------------------------------------------------------------------------------