Skip to content
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.

Copy link

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.
You can’t perform that action at this time.