add StyleSheet.absoluteFill convenience constant

Summary:
It's annoying and inefficient to create styles like

```
  wrapper: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
```

all the time, so this makes a handy constant for reuse and a helper method to create customized
styles.

Reviewed By: devknoll

Differential Revision: D3389612

fbshipit-source-id: 88fbe9e8ca32a0bc937bf275cf5ae0739ee21302

Libraries/ReactIOS/renderApplication.android.js

@@ -11,22 +11,22 @@
 
 'use strict';
 
-var Inspector = require('Inspector');
+const Inspector = require('Inspector');
-var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
-var React = require('React');
+const React = require('React');
-var ReactNative = require('ReactNative');
+const ReactNative = require('ReactNative');
-var StyleSheet = require('StyleSheet');
+const StyleSheet = require('StyleSheet');
-var Subscribable = require('Subscribable');
+const Subscribable = require('Subscribable');
-var View = require('View');
+const View = require('View');
 
-var invariant = require('fbjs/lib/invariant');
+const invariant = require('fbjs/lib/invariant');
 
-var YellowBox = __DEV__ ? require('YellowBox') : null;
+const YellowBox = __DEV__ ? require('YellowBox') : null;
 
 // require BackAndroid so it sets the default handler that exits the app if no listeners respond
 require('BackAndroid');
 
-var AppContainer = React.createClass({
+const AppContainer = React.createClass({
   mixins: [Subscribable.Mixin],
 
   getInitialState: function() {
@@ -41,7 +41,7 @@ var AppContainer = React.createClass({
   toggleElementInspector: function() {
     this.setState({
       inspectorVisible: !this.state.inspectorVisible,
-      rootNodeHandle: ReactNative.findNodeHandle(this.refs.main),
+      rootNodeHandle: ReactNative.findNodeHandle(this._mainRef),
     });
   },
 
@@ -63,7 +63,7 @@ var AppContainer = React.createClass({
         onRequestRerenderApp={(updateInspectedViewTag) => {
           this.setState(
             (s) => ({mainKey: s.mainKey + 1}),
-            () => updateInspectedViewTag(ReactNative.findNodeHandle(this.refs.main))
+            () => updateInspectedViewTag(ReactNative.findNodeHandle(this._mainRef))
           );
         }}
       /> :
@@ -74,21 +74,26 @@ var AppContainer = React.createClass({
     this._unmounted = true;
   },
 
+  _setMainRef: function(ref) {
+    this._mainRef = ref;
+  },
+
   render: function() {
-    var RootComponent = this.props.rootComponent;
+    const RootComponent = this.props.rootComponent;
-    var appView =
+    const appView =
       <View
-        ref="main"
+        ref={this._setMainRef}
         key={this.state.mainKey}
         collapsable={!this.state.inspectorVisible}
-        style={styles.appContainer}>
+        style={StyleSheet.absoluteFill}>
         <RootComponent
           {...this.props.initialProps}
           rootTag={this.props.rootTag}
-          importantForAccessibility={this.state.rootImportanceForAccessibility}/>
+          importantForAccessibility={this.state.rootImportanceForAccessibility}
+        />
       </View>;
     return __DEV__ ?
-      <View style={styles.appContainer}>
+      <View style={StyleSheet.absoluteFill}>
         {appView}
         <YellowBox />
         {this.renderInspector()}
@@ -110,19 +115,10 @@ function renderApplication<D, P, S>(
     <AppContainer
       rootComponent={RootComponent}
       initialProps={initialProps}
-      rootTag={rootTag} />,
+      rootTag={rootTag}
+    />,
     rootTag
   );
 }
 
-var styles = StyleSheet.create({
-  appContainer: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-  },
-});
-
 module.exports = renderApplication;

Libraries/StyleSheet/StyleSheet.js

@@ -22,6 +22,15 @@ if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }
 
+const absoluteFillObject = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+const absoluteFill = ReactNativePropRegistry.register(absoluteFillObject); // This also freezes it
+
 /**
  * A StyleSheet is an abstraction similar to CSS StyleSheets
  *
@@ -86,6 +95,27 @@ module.exports = {
    */
   hairlineWidth,
 
+  /**
+   * A very common pattern is to create overlays with position absolute and zero positioning,
+   * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
+   * styles.
+   */
+  absoluteFill,
+
+  /**
+   * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
+   * used to create a customized entry in a `StyleSheet`, e.g.:
+   *
+   *   const styles = StyleSheet.create({
+   *     wrapper: {
+   *       ...StyleSheet.absoluteFillObject,
+   *       top: 10,
+   *       backgroundColor: 'transparent',
+   *     },
+   *   });
+   */
+  absoluteFillObject,
+
   /**
    * Flattens an array of style objects, into one aggregated style object.
    * Alternatively, this method can be used to lookup IDs, returned by