From 27de687802b1601db4146172243280976d8cbb6f Mon Sep 17 00:00:00 2001
From: Valentin Shergin <valentin.shergin@coinbase.com>
Date: Sun, 23 May 2021 16:33:52 -0500
Subject: [PATCH] Fixed `alignItems: baseline` for <Text> elements on Android

---
 .../react/views/text/ReactTextShadowNode.java | 16 +++++
 .../js/examples/Text/TextExample.android.js   | 62 +++++++++++++++++++
 2 files changed, 78 insertions(+)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java
index f350bccf872f58..bdb160f710c6c5 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java
@@ -35,6 +35,7 @@
 import com.facebook.yoga.YogaConstants;
 import com.facebook.yoga.YogaDirection;
 import com.facebook.yoga.YogaMeasureFunction;
+import com.facebook.yoga.YogaBaselineFunction;
 import com.facebook.yoga.YogaMeasureMode;
 import com.facebook.yoga.YogaMeasureOutput;
 import com.facebook.yoga.YogaNode;
@@ -159,6 +160,20 @@ public long measure(
         }
       };
 
+  private final YogaBaselineFunction mTextBaselineFunction =
+    new YogaBaselineFunction() {
+      @Override
+      public float baseline(YogaNode node, float width, float height) {
+        Spannable text =
+          Assertions.assertNotNull(
+            mPreparedSpannableText,
+            "Spannable element has not been prepared in onBeforeLayout");
+
+        Layout layout = measureSpannedText(text, width, YogaMeasureMode.EXACTLY);
+        return layout.getLineBaseline(layout.getLineCount() - 1);
+      }
+    };
+
   public ReactTextShadowNode() {
     this(null);
   }
@@ -171,6 +186,7 @@ public ReactTextShadowNode(@Nullable ReactTextViewManagerCallback reactTextViewM
   private void initMeasureFunction() {
     if (!isVirtual()) {
       setMeasureFunction(mTextMeasureFunction);
+      setBaselineFunction(mTextBaselineFunction);
     }
   }
 
diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js
index 9a53a9f553169a..1a7583f8818c8a 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.android.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.android.js
@@ -878,6 +878,62 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
 });
+
+class TextBaseLineLayoutExample extends React.Component<*, *> {
+  render() {
+    const texts = [];
+    for (let i = 9; i >= 0; i--) {
+      texts.push(
+        <Text key={i} style={{fontSize: 8 + i * 5, maxWidth: 20, backgroundColor: '#eee'}}>
+          {i}
+        </Text>,
+      );
+    }
+
+    const marker = (
+      <View style={{width: 20, height: 20, backgroundColor: 'gray'}} />
+    );
+    const subtitleStyle = {fontSize: 16, marginTop: 8, fontWeight: 'bold'};
+
+    return (
+      <View>
+        <Text style={subtitleStyle}>{'Nested <Text/>s:'}</Text>
+        <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
+          {marker}
+          <Text>{texts}</Text>
+          {marker}
+        </View>
+
+        <Text style={subtitleStyle}>{'Array of <Text/>s in <View>:'}</Text>
+        <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
+          {marker}
+          {texts}
+          {marker}
+        </View>
+
+        <Text style={subtitleStyle}>{'Interleaving <View> and <Text>:'}</Text>
+        <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
+          {marker}
+          <Text selectable={true}>
+            Some text.
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'baseline',
+                backgroundColor: '#eee',
+              }}>
+              {marker}
+              <Text>Text inside View.</Text>
+              {marker}
+            </View>
+          </Text>
+          {marker}
+        </View>
+      </View>
+    );
+  }
+}
+
 exports.title = 'Text';
 exports.documentationURL = 'https://reactnative.dev/docs/text';
 exports.category = 'Basic';
@@ -889,4 +945,10 @@ exports.examples = [
       return <TextExample />;
     },
   },
+  {
+    title: "Text `alignItems: 'baseline'` style",
+    render: function(): React.Node {
+      return <TextBaseLineLayoutExample />;
+    },
+  },
 ];