Permalink
Browse files

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
  • Loading branch information...
sahrens authored and Facebook Github Bot 2 committed Jun 6, 2016
1 parent bf010a4 commit e79f5d7e7a129f30a8817c0676c98990fbe01686
Showing with 55 additions and 29 deletions.
  1. +25 −29 Libraries/ReactIOS/renderApplication.android.js
  2. +30 −0 Libraries/StyleSheet/StyleSheet.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 =
<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;
@@ -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

1 comment on commit e79f5d7

@fab1an

This comment has been minimized.

Show comment
Hide comment
@fab1an

fab1an Jul 7, 2016

Just want to link to my library react-native-tachyons here, which includes this constant and similar styling as well.

fab1an commented on e79f5d7 Jul 7, 2016

Just want to link to my library react-native-tachyons here, which includes this constant and similar styling as well.

Please sign in to comment.