<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

@@ -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;

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']
   ),

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;