From dcdf1468f9f354ef83793bfdfcd1d212a17d430d Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 8 May 2018 12:55:35 -0700
Subject: [PATCH] [fix] onLayout timing without ResizeObserver

onLayout is called after the component is mounted to the DOM. This makes
both the fallback and ResizeObserver code path behave the same as React
Native.

Fix #911
Fix #941
Close #939
---
 .../react-native-web/src/modules/applyLayout/index.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/react-native-web/src/modules/applyLayout/index.js b/packages/react-native-web/src/modules/applyLayout/index.js
index f4085ecf..7ec25044 100644
--- a/packages/react-native-web/src/modules/applyLayout/index.js
+++ b/packages/react-native-web/src/modules/applyLayout/index.js
@@ -55,9 +55,10 @@ const observe = instance => {
     node._onLayoutId = id;
     resizeObserver.observe(node);
   } else {
-    const id = guid();
     instance._onLayoutId = id;
-    instance._handleLayout();
+    setTimeout(() => {
+      instance._handleLayout();
+    }, 0);
   }
 };
 
@@ -105,8 +106,6 @@ const applyLayout = Component => {
         observe(this);
       } else if (!this.props.onLayout && prevProps.onLayout) {
         unobserve(this);
-      } else if (!resizeObserver) {
-        this._handleLayout();
       }
     }
   );
@@ -123,10 +122,8 @@ const applyLayout = Component => {
     const layout = this._layoutState;
     const { onLayout } = this.props;
 
-    if (onLayout) {
+    if (this._isMounted && onLayout) {
       this.measure((x, y, width, height) => {
-        if (!this._isMounted) return;
-
         if (
           layout.x !== x ||
           layout.y !== y ||