Merge pull request #1 from dsibiski/willchange-event

Implements 'handleStatusBarWillChange'
jgkim · May 18, 2015 · cba05a9 · cba05a9
2 parents 8fdbce8 + 80fcf89
commit cba05a9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,11 @@ Watch and respond to changes in the iOS status bar height.
    [(Screenshot)](http://url.brentvatne.ca/g9Wp).
 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
 
 ```javascript
@@ -22,14 +27,20 @@ var MyApp = React.createClass({
    },
 
    componentDidMount: function() {
-     StatusBarSizeIOS.addEventListener('change', this._handleStatusBarSizeChange);
+     StatusBarSizeIOS.addEventListener('willChange', this._handleStatusBarSizeWillChange);
+     StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange);
    },
 
    componentWillUnmount: function() {
-     StatusBarSizeIOS.removeEventListener('change', this._handleStatusBarSizeChange);
+     StatusBarSizeIOS.removeEventListener('willChange', this._handleStatusBarSizeWillChange);
+     StatusBarSizeIOS.removeEventListener('didChange', this._handleStatusBarSizeDidChange);
+   },
+
+   _handleStatusBarSizeWillChange: function(nextStatusBarHeight) {
+     console.log('Will Change: ' + nextStatusBarHeight);
    },
 
-   _handleStatusBarSizeChange: function(currentStatusBarHeight) {
+   _handleStatusBarSizeDidChange: function(currentStatusBarHeight) {
      console.log('changed');
      this.setState({ currentStatusBarHeight: currentStatusBarHeight });
    },
@@ -48,8 +59,4 @@ var MyApp = React.createClass({
 
 ## TODOS
 
-- [ ] Any way to know when status bar change is triggered what is going
-  to happen to it? Will it grow or shrink? To what height? Could be useful to transition with it,
-  otherwise the `willChange` event is a bit pointless (right now this
-  lib only responds to `didChange`)
 - [ ] Update it after device rotation event
diff --git a/RNStatusBarSize/RNStatusBarSize.m b/RNStatusBarSize/RNStatusBarSize.m
@@ -26,9 +26,14 @@ - (instancetype)init
     _lastKnownHeight = RNCurrentStatusBarSize();
 
     [[NSNotificationCenter defaultCenter] addObserver:self
-                                          selector:@selector(handleStatusBarDidChange)
-                                          name:UIApplicationDidChangeStatusBarFrameNotification
-                                          object:nil];
+                                             selector:@selector(handleStatusBarWillChange:)
+                                                 name:UIApplicationWillChangeStatusBarFrameNotification
+                                               object:nil];
+
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(handleStatusBarDidChange)
+                                                 name:UIApplicationDidChangeStatusBarFrameNotification
+                                               object:nil];
   }
   return self;
 }
@@ -41,6 +46,20 @@ - (void)dealloc
 
 #pragma mark - App Notification Methods
 
+- (void)handleStatusBarWillChange:(NSNotification *)notification
+{
+  NSValue *rectValue = [[notification userInfo] valueForKey:UIApplicationStatusBarFrameUserInfoKey];
+
+  CGRect newFrame;
+  [rectValue getValue:&newFrame];
+
+  float newHeight = newFrame.size.height;
+  if (newHeight != _lastKnownHeight) {
+    [_bridge.eventDispatcher sendDeviceEventWithName:@"statusBarSizeWillChange"
+                             body:@{@"height": [NSNumber numberWithFloat:newHeight]}];
+  }
+}
+
 - (void)handleStatusBarDidChange
 {
   float newHeight = RNCurrentStatusBarSize();

diff --git a/StatusBarSizeIOS.js b/StatusBarSizeIOS.js
@@ -10,7 +10,11 @@ var RNStatusBarSize = NativeModules.RNStatusBarSize;
 
 var logError = require('logError');
 
-var DEVICE_STATUS_BAR_HEIGHT_EVENT = 'statusBarSizeDidChange';
+var DEVICE_STATUS_BAR_HEIGHT_EVENTS = {
+    willChange: 'statusBarSizeWillChange',
+    didChange: 'statusBarSizeDidChange',
+    change: 'statusBarSizeDidChange'
+};
 
 var _statusBarSizeHandlers = {};
 
@@ -32,12 +36,17 @@ var _statusBarSizeHandlers = {};
  *   };
  * },
  * componentDidMount: function() {
- *   StatusBarSizeIOS.addEventListener('change', this._handleStatusBarSizeChange);
+ *   StatusBarSizeIOS.addEventListener('willChange', this._handleStatusBarSizeWillChange);
+ *   StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange);
  * },
  * componentWillUnmount: function() {
- *   StatusBarSizeIOS.removeEventListener('change', this._handleStatusBarSizeChange);
+ *   StatusBarSizeIOS.removeEventListener('willChange', this._handleStatusBarSizeWillChange);
+ *   StatusBarSizeIOS.removeEventListener('didChange', this._handleStatusBarSizeDidChange);
+ * },
+ * _handleStatusBarSizeWillChange: function(upcomingStatusBarHeight) {
+ *   console.log('Upcoming StatusBar Height:' + upcomingStatusBarHeight);
  * },
- * _handleStatusBarSizeChange: function(currentStatusBarHeight) {
+ * _handleStatusBarSizeDidChange: function(currentStatusBarHeight) {
  *   this.setState({ currentStatusBarHeight, });
  * },
  * render: function() {
@@ -53,23 +62,25 @@ var _statusBarSizeHandlers = {};
 var StatusBarSizeIOS = {
 
   /**
-   * Add a handler to Status Bar size changes by listening to the `change` event type
-   * and providing the handler
+   * Add a handler to Status Bar size changes by listening to the event type
+   * and providing the handler.
+   *
+   * Possible event types: change (deprecated), willChange, didChange
    */
   addEventListener: function(
     type: string,
     handler: Function
   ) {
     _statusBarSizeHandlers[handler] = RCTDeviceEventEmitter.addListener(
-      DEVICE_STATUS_BAR_HEIGHT_EVENT,
+      DEVICE_STATUS_BAR_HEIGHT_EVENTS[type],
       (statusBarSizeData) => {
         handler(statusBarSizeData.height);
       }
     );
   },
 
   /**
-   * Remove a handler by passing the `change` event type and the handler
+   * Remove a handler by passing the event type and the handler
    */
   removeEventListener: function(
     type: string,
@@ -87,7 +98,7 @@ var StatusBarSizeIOS = {
 };
 
 RCTDeviceEventEmitter.addListener(
-  DEVICE_STATUS_BAR_HEIGHT_EVENT,
+  DEVICE_STATUS_BAR_HEIGHT_EVENTS.didChange,
   (statusBarData) => {
     StatusBarSizeIOS.currentHeight = statusBarData.height;
   }