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