[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}} ```
nickstamas · May 7, 2015 · 1ef4e00 · 1ef4e00
1 parent f251b0d
commit 1ef4e00
Show file tree

Hide file tree

Showing 11 changed files with 389 additions and 11 deletions.
diff --git a/Examples/UIExplorer/LayoutEventsExample.js b/Examples/UIExplorer/LayoutEventsExample.js
@@ -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 />;
+  },
+}];
diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js
@@ -64,6 +64,7 @@ var APIS = [
   require('./BorderExample'),
   require('./CameraRollExample.ios'),
   require('./GeolocationExample'),
+  require('./LayoutEventsExample'),
   require('./LayoutExample'),
   require('./NetInfoExample'),
   require('./PanResponderExample'),

diff --git a/IntegrationTests/IntegrationTestsApp.js b/IntegrationTests/IntegrationTestsApp.js
@@ -25,6 +25,7 @@ var TESTS = [
   require('./IntegrationTestHarnessTest'),
   require('./TimersTest'),
   require('./AsyncStorageTest'),
+  require('./LayoutEventsTest'),
   require('./SimpleSnapshotTest'),
 ];
 

diff --git a/IntegrationTests/IntegrationTestsTests/IntegrationTestsTests.m b/IntegrationTests/IntegrationTestsTests/IntegrationTestsTests.m
@@ -71,6 +71,11 @@ - (void)testAsyncStorage
   [_runner runTest:_cmd module:@"AsyncStorageTest"];
 }
 
+- (void)testLayoutEvents
+{
+  [_runner runTest:_cmd module:@"LayoutEventsTest"];
+}
+
 #pragma mark Snapshot Tests
 
 - (void)testSimpleSnapshot

diff --git a/IntegrationTests/LayoutEventsTest.js b/IntegrationTests/LayoutEventsTest.js
@@ -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;
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
@@ -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:

diff --git a/Libraries/ReactIOS/ReactIOSViewAttributes.js b/Libraries/ReactIOS/ReactIOSViewAttributes.js
@@ -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;