From 7b3e67def0312416ed24f5545b63164443130bce Mon Sep 17 00:00:00 2001
From: Ben Clayton <ben@calvium.com>
Date: Fri, 2 Dec 2016 12:46:44 -0800
Subject: [PATCH] <Text> Expose Android's includeFontPadding property to
 JavaScript.

Summary:
By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.

We have found that the effect is very noticeable with certain custom fonts on Android. On iOS the font aligns vertically as expected.

Android exposes a property `includeFontPadding` that will remove this extra padding if set to false. This PR exposes that to JS, and adds it to the documentation and UIExplorer.
Closes https://github.com/facebook/react-native/pull/9323

Differential Revision: D4266713

Pulled By: lacker

fbshipit-source-id: f9711254bc26c09b4586a865f0e95ef4bf77cf3f
---
 Examples/UIExplorer/js/TextExample.android.js | 25 +++++++++++++++++++
 Libraries/Text/TextStylePropTypes.js          |  7 ++++++
 .../views/text/ReactTextViewManager.java      |  5 ++++
 3 files changed, 37 insertions(+)

diff --git a/Examples/UIExplorer/js/TextExample.android.js b/Examples/UIExplorer/js/TextExample.android.js
index 4c275b74a500da..54ef95ac93e521 100644
--- a/Examples/UIExplorer/js/TextExample.android.js
+++ b/Examples/UIExplorer/js/TextExample.android.js
@@ -411,6 +411,23 @@ class TextExample extends React.Component {
             This very long text should be truncated with dots in the beginning.
           </Text>
         </UIExplorerBlock>
+        <UIExplorerBlock title="Include Font Padding">
+          <View style={{flexDirection: 'row', justifyContent: 'space-around', marginBottom: 10}}>
+            <View style={{alignItems: 'center'}}>
+              <Text style={styles.includeFontPaddingText}>
+                Ey
+              </Text>
+              <Text>Default</Text>
+            </View>
+            <View style={{alignItems: 'center'}}>
+              <Text style={[styles.includeFontPaddingText, {includeFontPadding: false, marginLeft: 10}]}>
+                Ey
+              </Text>
+              <Text>includeFontPadding: false</Text>
+            </View>
+          </View>
+          <Text>By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.</Text>
+        </UIExplorerBlock>
       </UIExplorerPage>
     );
   }
@@ -421,6 +438,14 @@ var styles = StyleSheet.create({
     left: 5,
     backgroundColor: 'rgba(100, 100, 100, 0.3)'
   },
+  includeFontPaddingText: {
+    fontSize: 120,
+    fontFamily: 'sans-serif',
+    backgroundColor: '#EEEEEE',
+    color: '#000000',
+    textAlignVertical: 'center',
+    alignSelf: 'center',
+  }
 });
 
 module.exports = TextExample;
diff --git a/Libraries/Text/TextStylePropTypes.js b/Libraries/Text/TextStylePropTypes.js
index bc85c427bef01c..4c84de66dab394 100644
--- a/Libraries/Text/TextStylePropTypes.js
+++ b/Libraries/Text/TextStylePropTypes.js
@@ -66,6 +66,13 @@ const TextStylePropTypes = {
   textAlignVertical: ReactPropTypes.oneOf(
     ['auto' /*default*/, 'top', 'bottom', 'center']
   ),
+  /**
+   * Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
+   * With some fonts, this padding can make text look slightly misaligned when centered vertically.
+   * For best results also set `textAlignVertical` to `center`. Default is true.
+   * @platform android
+   */
+  includeFontPadding: ReactPropTypes.bool,
   textDecorationLine: ReactPropTypes.oneOf(
     ['none' /*default*/, 'underline', 'line-through', 'underline line-through']
   ),
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
index 562576e0950626..255581a100ea1a 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
@@ -143,6 +143,11 @@ public void setBorderColor(ReactTextView view, int index, Integer color) {
     view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
   }
 
+  @ReactProp(name = "includeFontPadding", defaultBoolean = true)
+  public void setIncludeFontPadding(ReactTextView view, boolean includepad) {
+    view.setIncludeFontPadding(includepad);
+  }
+
   @Override
   public void updateExtraData(ReactTextView view, Object extraData) {
     ReactTextUpdate update = (ReactTextUpdate) extraData;