Cross platform status bar API

Summary:
I started working on improving the `StatusBar` API and make it work on Android. I added support for `setColor`, `setTranslucent` (the status bar is still visible but the app can draw under) and `setHidden` on Android. Looking for feedback on how to improve the API before I put more time on this :).

Right now I went for a cross platform API and functions that don't exist on a platform are just a no-op but I'm not sure it is the best choice since at the moment what is supported is very different between both platforms. I was wondering what you guys think and if it would be better off as 2 different modules.

It is also possible to port some of the features I added for Android to iOS even if there is no 'standard' way to do it. Like `setColor` could be implemented by drawing a colored view under the status bar and translucent by adding/removing some padding.
Closes https://github.com/facebook/react-native/pull/5360

Reviewed By: svcscm

Differential Revision: D2840417

Pulled By: nicklockwood

fb-gh-sync-id: 5c8d988bccf8035341f0efe27e54dd8402c18d24

Libraries/Components/StatusBar/StatusBar.js

@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule StatusBar
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+const ColorPropType = require('ColorPropType');
+const Platform = require('Platform');
+
+const processColor = require('processColor');
+
+const StatusBarManager = require('NativeModules').StatusBarManager;
+
+type DefaultProps = {
+  animated: boolean;
+};
+
+/**
+ * Merges the prop stack with the default values.
+ */
+function mergePropsStack(propsStack: Array<Object>): Object {
+  return propsStack.reduce((prev, cur) => {
+    return Object.assign(prev, cur);
+  }, {
+    backgroundColor: 'black',
+    barStyle: 'default',
+    translucent: false,
+    hidden: false,
+    networkActivityIndicatorVisible: false,
+  });
+}
+
+/**
+ * Component to control the app status bar.
+ *
+ * ### Usage with Navigator
+ *
+ * It is possible to have multiple `StatusBar` components mounted at the same
+ * time. The props will be merged in the order the `StatusBar` components were
+ * mounted. One use case is to specify status bar styles per route using `Navigator`.
+ *
+ * ```
+ *  <View>
+ *    <StatusBar
+ *      backgroundColor="blue"
+ *      barStyle="light-content"
+ *    />
+ *    <Navigator
+ *      initialRoute={{statusBarHidden: true}}
+ *      renderScene={(route, navigator) =>
+ *        <View>
+ *          <StatusBar hidden={route.statusBarHidden} />
+ *          ...
+ *        </View>
+ *      }
+ *    />
+ *  </View>
+ * ```
+ */
+const StatusBar = React.createClass({
+  statics: {
+    _propsStack: [],
+  },
+
+  propTypes: {
+    /**
+     * If the status bar is hidden.
+     */
+    hidden: React.PropTypes.bool,
+    /**
+     * If the transition between status bar property changes should be animated.
+     * Supported for backgroundColor, barStyle and hidden.
+     */
+    animated: React.PropTypes.bool,
+    /**
+     * The background color of the status bar.
+     * @platform android
+     */
+    backgroundColor: ColorPropType,
+    /**
+     * If the status bar is translucent.
+     * When translucent is set to true, the app will draw under the status bar.
+     * This is useful when using a semi transparent status bar color.
+     *
+     * @platform android
+     */
+    translucent: React.PropTypes.bool,
+    /**
+     * Sets the color of the status bar text.
+     *
+     * @platform ios
+     */
+    barStyle: React.PropTypes.oneOf([
+      'default',
+      'light-content',
+    ]),
+    /**
+     * If the network activity indicator should be visible.
+     *
+     * @platform ios
+     */
+    networkActivityIndicatorVisible: React.PropTypes.bool,
+    /**
+     * The transition effect when showing and hiding the status bar using the `hidden`
+     * prop. Defaults to 'fade'.
+     *
+     * @platform ios
+     */
+    showHideTransition: React.PropTypes.oneOf([
+      'fade',
+      'slide',
+    ]),
+  },
+
+  getDefaultProps(): DefaultProps {
+    return {
+      animated: false,
+      showHideTransition: 'fade',
+    };
+  },
+
+  componentDidMount() {
+    // Every time a StatusBar component is mounted, we push it's prop to a stack
+    // and always update the native status bar with the props from the top of then
+    // stack. This allows having multiple StatusBar components and the one that is
+    // added last or is deeper in the view hierachy will have priority.
+    StatusBar._propsStack.push(this.props);
+    this._updatePropsStack();
+  },
+
+  componentWillUnmount() {
+    // When a StatusBar is unmounted, remove itself from the stack and update
+    // the native bar with the next props.
+    const index = StatusBar._propsStack.indexOf(this.props);
+    StatusBar._propsStack.splice(index, 1);
+
+    this._updatePropsStack();
+  },
+
+  componentDidUpdate(oldProps: Object) {
+    const index = StatusBar._propsStack.indexOf(oldProps);
+    StatusBar._propsStack[index] = this.props;
+
+    this._updatePropsStack();
+  },
+
+  /**
+   * Updates the native status bar with the props from the stack.
+   */
+  _updatePropsStack() {
+    const mergedProps = mergePropsStack(StatusBar._propsStack);
+
+    if (Platform.OS === 'ios') {
+      if (mergedProps.barStyle !== undefined) {
+        StatusBarManager.setStyle(mergedProps.barStyle, this.props.animated);
+      }
+      if (mergedProps.hidden !== undefined) {
+        StatusBarManager.setHidden(
+          mergedProps.hidden,
+          this.props.animated ? this.props.showHideTransition : 'none'
+        );
+      }
+      if (mergedProps.networkActivityIndicatorVisible !== undefined) {
+        StatusBarManager.setNetworkActivityIndicatorVisible(
+          mergedProps.networkActivityIndicatorVisible
+        );
+      }
+    } else if (Platform.OS === 'android') {
+      if (mergedProps.backgroundColor !== undefined) {
+        StatusBarManager.setColor(processColor(mergedProps.backgroundColor), this.props.animated);
+      }
+      if (mergedProps.hidden !== undefined) {
+        StatusBarManager.setHidden(mergedProps.hidden);
+      }
+      if (mergedProps.translucent !== undefined) {
+        StatusBarManager.setTranslucent(mergedProps.translucent);
+      }
+    }
+  },
+
+  render(): ?ReactElement {
+    return null;
+  },
+});
+
+module.exports = StatusBar;