Permalink
Browse files

[ReactNative] Introduce onLayout events

Summary:
Simply add an `onLayout` callback to a native view component, and the callback
will be invoked with the current layout information when the view is mounted and
whenever the layout changes.

The only limitation is that scroll position and other stuff the layout system
isn't aware of is not taken into account.  This is because onLayout events
wouldn't be triggered for these changes and if they are desired they should be
tracked separately (e.g. with `onScroll`) and combined.

Also fixes some bugs with LayoutAnimation callbacks.

@public

Test Plan:
- Run new LayoutEventsExample in UIExplorer and see it work correctly.
- New integration test passes internally (IntegrationTest project seems busted).
- New jest test case passes.

{F22318433}

```
2015-05-06 15:45:05.848 [info][tid:com.facebook.React.JavaScript] "Running application "UIExplorerApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF"
2015-05-06 15:45:05.881 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":123,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.882 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":122,"width":50,"height":50}}
2015-05-06 15:45:05.883 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":204}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":287.5}}
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "layout animation done."
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":82,"width":50,"height":50}}
2015-05-06 15:45:09.848 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":110.5,"x":60,"width":214,"height":287.5}}
2015-05-06 15:45:09.862 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":120,"height":68}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":55,"width":50,"height":50}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":128,"x":60,"width":160,"height":337.5}}
```
  • Loading branch information...
sahrens committed May 7, 2015
1 parent f251b0d commit 1ef4e00fba948c9684ef208b278df11dd85620de
@@ -0,0 +1,150 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+ Image,
+ LayoutAnimation,
+ StyleSheet,
+ Text,
+ View,
+} = React;
+
+type LayoutEvent = {
+ nativeEvent: {
+ layout: {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ };
+ };
+};
+
+var LayoutEventExample = React.createClass({
+ getInitialState: function() {
+ return {
+ viewStyle: {
+ margin: 20,
+ },
+ };
+ },
+ animateViewLayout: function() {
+ LayoutAnimation.configureNext(
+ LayoutAnimation.Presets.spring,
+ () => {
+ console.log('layout animation done.');
+ this.addWrapText();
+ },
+ (error) => { throw new Error(JSON.stringify(error)); }
+ );
+ this.setState({
+ viewStyle: {
+ margin: this.state.viewStyle.margin > 20 ? 20 : 60,
+ }
+ });
+ },
+ addWrapText: function() {
+ this.setState(
+ {extraText: ' And a bunch more text to wrap around a few lines.'},
+ this.changeContainer
+ );
+ },
+ changeContainer: function() {
+ this.setState({containerStyle: {width: 280}});
+ },
+ onViewLayout: function(e: LayoutEvent) {
+ console.log('received view layout event\n', e.nativeEvent);
+ this.setState({viewLayout: e.nativeEvent.layout});
+ },
+ onTextLayout: function(e: LayoutEvent) {
+ console.log('received text layout event\n', e.nativeEvent);
+ this.setState({textLayout: e.nativeEvent.layout});
+ },
+ onImageLayout: function(e: LayoutEvent) {
+ console.log('received image layout event\n', e.nativeEvent);
+ this.setState({imageLayout: e.nativeEvent.layout});
+ },
+ render: function() {
+ var viewStyle = [styles.view, this.state.viewStyle];
+ var textLayout = this.state.textLayout || {width: '?', height: '?'};
+ var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
+ return (
+ <View style={this.state.containerStyle}>
+ <Text>
+ onLayout events are called on mount and whenever layout is updated,
+ including after layout animations complete.{' '}
+ <Text style={styles.pressText} onPress={this.animateViewLayout}>
+ Press here to change layout.
+ </Text>
+ </Text>
+ <View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
+ <Image
+ ref="img"
+ onLayout={this.onImageLayout}
+ style={styles.image}
+ source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}
+ />
+ <Text>
+ ViewLayout: {JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'}
+ </Text>
+ <Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
+ A simple piece of text.{this.state.extraText}
+ </Text>
+ <Text>
+ {'\n'}
+ Text w/h: {textLayout.width}/{textLayout.height + '\n'}
+ Image x/y: {imageLayout.x}/{imageLayout.y}
+ </Text>
+ </View>
+ </View>
+ );
+ }
+});
+
+var styles = StyleSheet.create({
+ view: {
+ padding: 12,
+ borderColor: 'black',
+ borderWidth: 0.5,
+ backgroundColor: 'transparent',
+ },
+ text: {
+ alignSelf: 'flex-start',
+ borderColor: 'rgba(0, 0, 255, 0.2)',
+ borderWidth: 0.5,
+ },
+ image: {
+ width: 50,
+ height: 50,
+ marginBottom: 10,
+ alignSelf: 'center',
+ },
+ pressText: {
+ fontWeight: 'bold',
+ },
+});
+
+exports.title = 'onLayout';
+exports.description = 'Layout events can be used to measure view size and position.';
+exports.examples = [
+{
+ title: 'onLayout',
+ render: function(): ReactElement {
+ return <LayoutEventExample />;
+ },
+}];
@@ -64,6 +64,7 @@ var APIS = [
require('./BorderExample'),
require('./CameraRollExample.ios'),
require('./GeolocationExample'),
+ require('./LayoutEventsExample'),
require('./LayoutExample'),
require('./NetInfoExample'),
require('./PanResponderExample'),
@@ -25,6 +25,7 @@ var TESTS = [
require('./IntegrationTestHarnessTest'),
require('./TimersTest'),
require('./AsyncStorageTest'),
+ require('./LayoutEventsTest'),
require('./SimpleSnapshotTest'),
];
@@ -71,6 +71,11 @@ - (void)testAsyncStorage
[_runner runTest:_cmd module:@"AsyncStorageTest"];
}
+- (void)testLayoutEvents
+{
+ [_runner runTest:_cmd module:@"LayoutEventsTest"];
+}
+
#pragma mark Snapshot Tests
- (void)testSimpleSnapshot
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule LayoutEventsTest
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+ Image,
+ LayoutAnimation,
+ NativeModules,
+ StyleSheet,
+ Text,
+ View,
+} = React;
+var TestModule = NativeModules.TestModule || NativeModules.SnapshotTestManager;
+
+var deepDiffer = require('deepDiffer');
+
+function debug() {
+ //console.log.apply(null, arguments);
+}
+
+type LayoutEvent = {
+ nativeEvent: {
+ layout: {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ };
+ };
+};
+
+var LayoutEventsTest = React.createClass({
+ getInitialState: function() {
+ return {
+ didAnimation: false,
+ };
+ },
+ animateViewLayout: function() {
+ LayoutAnimation.configureNext(
+ LayoutAnimation.Presets.spring,
+ () => {
+ debug('layout animation done.');
+ this.checkLayout(this.addWrapText);
+ },
+ (error) => { throw new Error(JSON.stringify(error)); }
+ );
+ this.setState({viewStyle: {margin: 60}});
+ },
+ addWrapText: function() {
+ this.setState(
+ {extraText: ' And a bunch more text to wrap around a few lines.'},
+ () => this.checkLayout(this.changeContainer)
+ );
+ },
+ changeContainer: function() {
+ this.setState(
+ {containerStyle: {width: 280}},
+ () => this.checkLayout(TestModule.markTestCompleted)
+ );
+ },
+ checkLayout: function(next?: ?Function) {
+ if (!this.isMounted()) {
+ return;
+ }
+ this.refs.view.measure((x, y, width, height) => {
+ this.compare('view', {x, y, width, height}, this.state.viewLayout);
+ if (typeof next === 'function') {
+ next();
+ } else if (!this.state.didAnimation) {
+ // Trigger first state change after onLayout fires
+ this.animateViewLayout();
+ this.state.didAnimation = true;
+ }
+ });
+ this.refs.txt.measure((x, y, width, height) => {
+ this.compare('txt', {x, y, width, height}, this.state.textLayout);
+ });
+ this.refs.img.measure((x, y, width, height) => {
+ this.compare('img', {x, y, width, height}, this.state.imageLayout);
+ });
+ },
+ compare: function(node: string, measured: any, onLayout: any): void {
+ if (deepDiffer(measured, onLayout)) {
+ var data = {measured, onLayout};
+ throw new Error(
+ node + ' onLayout mismatch with measure ' +
+ JSON.stringify(data, null, ' ')
+ );
+ }
+ },
+ onViewLayout: function(e: LayoutEvent) {
+ debug('received view layout event\n', e.nativeEvent);
+ this.setState({viewLayout: e.nativeEvent.layout}, this.checkLayout);
+ },
+ onTextLayout: function(e: LayoutEvent) {
+ debug('received text layout event\n', e.nativeEvent);
+ this.setState({textLayout: e.nativeEvent.layout}, this.checkLayout);
+ },
+ onImageLayout: function(e: LayoutEvent) {
+ debug('received image layout event\n', e.nativeEvent);
+ this.setState({imageLayout: e.nativeEvent.layout}, this.checkLayout);
+ },
+ render: function() {
+ var viewStyle = [styles.view, this.state.viewStyle];
+ var textLayout = this.state.textLayout || {width: '?', height: '?'};
+ var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
+ return (
+ <View style={[styles.container, this.state.containerStyle]}>
+ <View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
+ <Image
+ ref="img"
+ onLayout={this.onImageLayout}
+ style={styles.image}
+ source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}
+ />
+ <Text>
+ ViewLayout: {JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'}
+ </Text>
+ <Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
+ A simple piece of text.{this.state.extraText}
+ </Text>
+ <Text>
+ {'\n'}
+ Text w/h: {textLayout.width}/{textLayout.height + '\n'}
+ Image x/y: {imageLayout.x}/{imageLayout.y}
+ </Text>
+ </View>
+ </View>
+ );
+ }
+});
+
+var styles = StyleSheet.create({
+ container: {
+ margin: 40,
+ },
+ view: {
+ margin: 20,
+ padding: 12,
+ borderColor: 'black',
+ borderWidth: 0.5,
+ backgroundColor: 'transparent',
+ },
+ text: {
+ alignSelf: 'flex-start',
+ borderColor: 'rgba(0, 0, 255, 0.2)',
+ borderWidth: 0.5,
+ },
+ image: {
+ width: 50,
+ height: 50,
+ marginBottom: 10,
+ alignSelf: 'center',
+ },
+});
+
+module.exports = LayoutEventsTest;
@@ -90,6 +90,11 @@ var View = React.createClass({
onStartShouldSetResponder: PropTypes.func,
onStartShouldSetResponderCapture: PropTypes.func,
+ /**
+ * Invoked on mount and layout changes with {x, y, width, height}.
+ */
+ onLayout: PropTypes.func,
+
/**
* In the absence of `auto` property, `none` is much like `CSS`'s `none`
* value. `box-none` is as if you had applied the `CSS` class:
@@ -9,8 +9,7 @@
* @providesModule ReactIOSViewAttributes
* @flow
*/
-
-"use strict";
+'use strict';
var merge = require('merge');
@@ -21,6 +20,7 @@ ReactIOSViewAttributes.UIView = {
accessible: true,
accessibilityLabel: true,
testID: true,
+ onLayout: true,
};
ReactIOSViewAttributes.RCTView = merge(
@@ -31,7 +31,7 @@ ReactIOSViewAttributes.RCTView = merge(
// For this property to be effective, it must be applied to a view that contains
// many subviews that extend outside its bound. The subviews must also have
// overflow: hidden, as should the containing view (or one of its superviews).
- removeClippedSubviews: true
+ removeClippedSubviews: true,
});
module.exports = ReactIOSViewAttributes;
Oops, something went wrong.

0 comments on commit 1ef4e00

Please sign in to comment.