diff --git a/Libraries/ReactIOS/renderApplication.android.js b/Libraries/ReactIOS/renderApplication.android.js
index 994eb52cfefb49..5b5ec232e44284 100644
--- a/Libraries/ReactIOS/renderApplication.android.js
+++ b/Libraries/ReactIOS/renderApplication.android.js
@@ -11,22 +11,22 @@
'use strict';
-var Inspector = require('Inspector');
-var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
-var React = require('React');
-var ReactNative = require('ReactNative');
-var StyleSheet = require('StyleSheet');
-var Subscribable = require('Subscribable');
-var View = require('View');
+const Inspector = require('Inspector');
+const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+const React = require('React');
+const ReactNative = require('ReactNative');
+const StyleSheet = require('StyleSheet');
+const Subscribable = require('Subscribable');
+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;
- var appView =
+ const RootComponent = this.props.rootComponent;
+ const appView =
+ style={StyleSheet.absoluteFill}>
+ importantForAccessibility={this.state.rootImportanceForAccessibility}
+ />
;
return __DEV__ ?
-
+
{appView}
{this.renderInspector()}
@@ -110,19 +115,10 @@ function renderApplication(
,
+ rootTag={rootTag}
+ />,
rootTag
);
}
-var styles = StyleSheet.create({
- appContainer: {
- position: 'absolute',
- left: 0,
- top: 0,
- right: 0,
- bottom: 0,
- },
-});
-
module.exports = renderApplication;
diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js
index 1fc7376abf4ea1..3c12f5f05cb7de 100644
--- a/Libraries/StyleSheet/StyleSheet.js
+++ b/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