From 84bca09f87e0d79d75ee74206a3b00589e83cbee Mon Sep 17 00:00:00 2001
From: David Vacca <dvacca@fb.com>
Date: Thu, 14 May 2020 21:40:11 -0700
Subject: [PATCH] Fix position of TextInlineViews when nesting multiple Text
 components

Summary:
This diff fixes the position of TextInlineViews when nesting multiple Text.
The root is that we were not taking into consideration LayoutOffset of nested TextViews during the calculation of the nested views.

changelog: [Internal] Internal fix in Fabric

Reviewed By: JoshuaGross

Differential Revision: D21586893

fbshipit-source-id: 55e6ad0cf95222588ffe9185f5e22baea1059448
---
 RNTester/js/components/TextInlineView.js         | 16 ++++++++++++++++
 RNTester/js/examples/Text/TextExample.android.js |  3 +++
 ReactCommon/fabric/mounting/Differentiator.cpp   |  4 +++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/RNTester/js/components/TextInlineView.js b/RNTester/js/components/TextInlineView.js
index e5fcc68aaea..a15762131b5 100644
--- a/RNTester/js/components/TextInlineView.js
+++ b/RNTester/js/components/TextInlineView.js
@@ -25,6 +25,21 @@ function Basic(): React.Node {
   );
 }
 
+function NestedTexts(): React.Node {
+  return (
+    <View>
+      <Text>This is the first row</Text>
+      <Text>
+        <Text>
+          <Text>This is a nested text </Text>
+          <View style={{height: 20, width: 20, backgroundColor: 'red'}} />
+          <Text> with a Red View</Text>
+        </Text>
+      </Text>
+    </View>
+  );
+}
+
 function ClippedByText(): React.Node {
   return (
     <View>
@@ -200,6 +215,7 @@ class ChangeInnerViewSize extends React.Component<*, ChangeSizeState> {
 
 module.exports = {
   Basic,
+  NestedTexts,
   ClippedByText,
   ChangeImageSize,
   ChangeViewSize,
diff --git a/RNTester/js/examples/Text/TextExample.android.js b/RNTester/js/examples/Text/TextExample.android.js
index 72813a71cd9..f9631821f99 100644
--- a/RNTester/js/examples/Text/TextExample.android.js
+++ b/RNTester/js/examples/Text/TextExample.android.js
@@ -664,6 +664,9 @@ class TextExample extends React.Component<{...}> {
         <RNTesterBlock title="Inline views">
           <TextInlineView.Basic />
         </RNTesterBlock>
+        <RNTesterBlock title="Inline views with multiple nested texts">
+          <TextInlineView.NestedTexts />
+        </RNTesterBlock>
         <RNTesterBlock title="Inline image/view clipped by <Text>">
           <TextInlineView.ClippedByText />
         </RNTesterBlock>
diff --git a/ReactCommon/fabric/mounting/Differentiator.cpp b/ReactCommon/fabric/mounting/Differentiator.cpp
index 0e93586411a..e1ac64cbf35 100644
--- a/ReactCommon/fabric/mounting/Differentiator.cpp
+++ b/ReactCommon/fabric/mounting/Differentiator.cpp
@@ -189,7 +189,9 @@ static void sliceChildShadowNodeViewPairsRecursively(
   for (auto const &sharedChildShadowNode : shadowNode.getChildren()) {
     auto &childShadowNode = *sharedChildShadowNode;
     auto shadowView = ShadowView(childShadowNode);
+    auto origin = layoutOffset;
     if (shadowView.layoutMetrics != EmptyLayoutMetrics) {
+      origin += shadowView.layoutMetrics.frame.origin;
       shadowView.layoutMetrics.frame.origin += layoutOffset;
     }
 
@@ -203,7 +205,7 @@ static void sliceChildShadowNodeViewPairsRecursively(
       }
 
       sliceChildShadowNodeViewPairsRecursively(
-          pairList, shadowView.layoutMetrics.frame.origin, childShadowNode);
+          pairList, origin, childShadowNode);
     }
   }
 }