Fire 'onLayout' when elements are resized

packages/react-native-web/src/modules/applyLayout/index.js

@@ -9,29 +9,73 @@
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import debounce from 'debounce';
+import findNodeHandle from '../../exports/findNodeHandle';
 
 const emptyObject = {};
 const registry = {};
 
 let id = 1;
 const guid = () => `r-${id++}`;
 
+let resizeObserver;
 if (canUseDOM) {
-  const triggerAll = () => {
-    Object.keys(registry).forEach(key => {
-      const instance = registry[key];
-      instance._handleLayout();
+  if (typeof window.ResizeObserver !== 'undefined') {
+    resizeObserver = new window.ResizeObserver(entries => {
+      entries.forEach(({ target }) => {
+        target._handleLayout && target._handleLayout();
+      });
     });
-  };
+  } else {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        'onLayout relies on ResizeObserver which is not supported by your browser. ' +
+          'Please include a polyfill. https://github.com/WICG/ResizeObserver/issues/3. ' +
+          'Falling back to window.onresize.'
+      );
+    }
 
-  window.addEventListener('resize', debounce(triggerAll, 16), false);
+    const triggerAll = () => {
+      Object.keys(registry).forEach(key => {
+        const instance = registry[key];
+        instance._handleLayout();
+      });
+    };
+
+    window.addEventListener('resize', debounce(triggerAll, 16), false);
+  }
 }
 
+const observe = instance => {
+  if (resizeObserver) {
+    const node = findNodeHandle(instance);
+    node._handleLayout = debounce(instance._handleLayout.bind(instance));
+    resizeObserver.observe(node);
+  } else {
+    const id = guid();
+    instance._onLayoutId = id;
+    registry[id] = instance;
+    instance._handleLayout();
+  }
+};
+
+const unobserve = instance => {
+  if (resizeObserver) {
+    const node = findNodeHandle(instance);
+    delete node._handleLayout;
+    resizeObserver.unobserve(node);
+  } else {
+    delete registry[instance._onLayoutId];
+    delete instance._onLayoutId;
+  }
+};
+
 const safeOverride = (original, next) => {
   if (original) {
     return function prototypeOverride() {
-      original.call(this);
-      next.call(this);
+      /* eslint-disable prefer-rest-params */
+      original.call(this, arguments);
+      next.call(this, arguments);
+      /* eslint-enable prefer-rest-params */
     };
   }
   return next;
@@ -47,24 +91,28 @@ const applyLayout = Component => {
     function componentDidMount() {
       this._layoutState = emptyObject;
       this._isMounted = true;
-      this._onLayoutId = guid();
-      registry[this._onLayoutId] = this;
-      this._handleLayout();
+      observe(this);
     }
   );
 
   Component.prototype.componentDidUpdate = safeOverride(
     componentDidUpdate,
-    function componentDidUpdate() {
-      this._handleLayout();
+    function componentDidUpdate(prevProps) {
+      if (this.props.onLayout && !prevProps.onLayout) {
+        observe(this);
+      } else if (!this.props.onLayout && prevProps.onLayout) {
+        unobserve(this);
+      } else if (!resizeObserver) {
+        this._handleLayout();
+      }
     }
   );
 
   Component.prototype.componentWillUnmount = safeOverride(
     componentWillUnmount,
     function componentWillUnmount() {
       this._isMounted = false;
-      delete registry[this._onLayoutId];
+      unobserve(this);
     }
   );
 

website/storybook/1-components/Text/TextScreen.js

@@ -4,6 +4,8 @@
  * @flow
  */
 
+import { View } from 'react-native';
+import OnLayoutExample from './examples/onLayout';
 import PropChildren from './examples/PropChildren';
 import PropNumberOfLines from './examples/PropNumberOfLines';
 import PropOnPress from './examples/PropOnPress';
@@ -132,13 +134,28 @@ const TextScreen = () => (
       <DocItem
         name="onLayout"
         typeInfo="?function"
-        description={
+        description={[
           <AppText>
             Invoked on mount and layout changes with{' '}
             <Code>{'{ nativeEvent: { layout: { x, y, width, height } } }'}</Code>, where{' '}
             <Code>x</Code> and <Code>y</Code> are the offsets from the parent node.
+          </AppText>,
+          <AppText>
+            NOTE: Behind the hood React Native for Web uses <Code>ResizeObserver</Code> and doesn't
+            polyfill it when not supported.
           </AppText>
-        }
+        ]}
+        example={{
+          render: () => (
+            <React.Fragment>
+              <OnLayoutExample style={{ padding: 10 }} />
+              <OnLayoutExample />
+              <View>
+                <OnLayoutExample />
+              </View>
+            </React.Fragment>
+          )
+        }}
       />
 
       <DocItem

website/storybook/1-components/Text/examples/onLayout.js

@@ -0,0 +1,34 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Text, TextPropTypes, StyleSheet } from 'react-native';
+
+export default class OnLayoutExample extends React.Component {
+  static propTypes = {
+    style: TextPropTypes.style
+  };
+
+  state = {
+    layoutInfo: {}
+  };
+
+  onLayout = ({ nativeEvent }) => {
+    this.setState({ layoutInfo: nativeEvent.layout });
+  };
+
+  render() {
+    return (
+      <Text onLayout={this.onLayout} style={[styles.root, this.props.style]}>
+        {JSON.stringify(this.state.layoutInfo)}
+      </Text>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#eee'
+  }
+});

website/storybook/1-components/View/ViewScreen.js

@@ -4,6 +4,8 @@
  * @flow
  */
 
+import { View } from 'react-native';
+import OnLayoutExample from './examples/onLayout';
 import PropPointerEvents from './examples/PropPointerEvents';
 import transformExamples from './examples/transforms';
 import ZIndexExample from './examples/ZIndex';
@@ -125,13 +127,28 @@ const ViewScreen = () => (
       <DocItem
         name="onLayout"
         typeInfo="?function"
-        description={
+        description={[
           <AppText>
             Invoked on mount and layout changes with{' '}
             <Code>{'{ nativeEvent: { layout: { x, y, width, height } } }'}</Code>, where{' '}
             <Code>x</Code> and <Code>y</Code> are the offsets from the parent node.
+          </AppText>,
+          <AppText>
+            NOTE: Behind the hood React Native for Web uses <Code>ResizeObserver</Code> and doesn't
+            polyfill it when not supported.
           </AppText>
-        }
+        ]}
+        example={{
+          render: () => (
+            <React.Fragment>
+              <OnLayoutExample style={{ padding: 10 }} />
+              <OnLayoutExample />
+              <View>
+                <OnLayoutExample />
+              </View>
+            </React.Fragment>
+          )
+        }}
       />
 
       <DocItem

website/storybook/1-components/View/examples/onLayout.js

@@ -0,0 +1,34 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Text, View, ViewPropTypes, StyleSheet } from 'react-native';
+
+export default class OnLayoutExample extends React.Component {
+  static propTypes = {
+    style: ViewPropTypes.style
+  };
+
+  state = {
+    layoutInfo: {}
+  };
+
+  onLayout = ({ nativeEvent }) => {
+    this.setState({ layoutInfo: nativeEvent.layout });
+  };
+
+  render() {
+    return (
+      <View onLayout={this.onLayout} style={[styles.root, this.props.style]}>
+        <Text>{JSON.stringify(this.state.layoutInfo)}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#eee'
+  }
+});