From 833961e05de1492073d7df1682ad6f1f68266fe2 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 4c275b74a..54ef95ac9 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 bc85c427b..4c84de66d 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 562576e09..255581a10 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 class ReactTextViewManager extends BaseViewManager<ReactTextView, ReactTe
     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;