Use TextLegend example in Android as well

Summary:
@public
Just movin' stuff around.
This shouldn't render any actual metrics yet on Android, need native changes for that.

Reviewed By: achen1

Differential Revision: D9584669

fbshipit-source-id: 4b6169b14d1f2053258191f67e1f361a4b714a8e

RNTester/js/Shared/TextLegend.js

@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('React');
+const {Picker, Text, View} = require('react-native');
+
+class TextLegend extends React.Component<*, *> {
+  state = {
+    textMetrics: [],
+    language: 'english',
+  };
+
+  render() {
+    const PANGRAMS = {
+      arabic:
+        'صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت — يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ',
+      chinese: 'Innovation in China 中国智造，慧及全球 0123456789',
+      english: 'The quick brown fox jumps over the lazy dog.',
+      emoji: '🙏🏾🚗💩😍🤯👩🏽‍🔧🇨🇦💯',
+      german: 'Falsches Üben von Xylophonmusik quält jeden größeren Zwerg',
+      greek: 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός',
+      hebrew: 'דג סקרן שט בים מאוכזב ולפתע מצא חברה',
+      hindi:
+        'ऋषियों को सताने वाले दुष्ट राक्षसों के राजा रावण का सर्वनाश करने वाले विष्णुवतार भगवान श्रीराम, अयोध्या के महाराज दशरथ के बड़े सपुत्र थे।',
+      igbo:
+        'Nne, nna, wepụ he’l’ụjọ dum n’ime ọzụzụ ụmụ, vufesi obi nye Chukwu, ṅụrịanụ, gbakọọnụ kpaa, kwee ya ka o guzoshie ike; ọ ghaghị ito, nwapụta ezi agwa',
+      irish:
+        'D’fhuascail Íosa Úrmhac na hÓighe Beannaithe pór Éava agus Ádhaimh',
+      japanese:
+        '色は匂へど 散りぬるを 我が世誰ぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず',
+      korean:
+        '키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다',
+      norwegian:
+        'Vår sære Zulu fra badeøya spilte jo whist og quickstep i min taxi.',
+      polish: 'Jeżu klątw, spłódź Finom część gry hańb!',
+      romanian: 'Muzicologă în bej vând whisky și tequila, preț fix.',
+      russian: 'Эх, чужак, общий съём цен шляп (юфть) – вдрызг!',
+      swedish: 'Yxskaftbud, ge vår WC-zonmö IQ-hjälp.',
+      thai:
+        'เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะๆ จ๋าๆ น่าฟังเอยฯ',
+    };
+    return (
+      <View>
+        <Picker
+          selectedValue={this.state.language}
+          onValueChange={itemValue => this.setState({language: itemValue})}>
+          {Object.keys(PANGRAMS).map(x => (
+            <Picker.Item
+              label={x[0].toUpperCase() + x.substring(1)}
+              key={x}
+              value={x}
+            />
+          ))}
+        </Picker>
+        <View>
+          {this.state.textMetrics.map(
+            ({
+              x,
+              y,
+              width,
+              height,
+              capHeight,
+              ascender,
+              descender,
+              xHeight,
+            }) => {
+              return [
+                <View
+                  key="baseline view"
+                  style={{
+                    top: y + ascender,
+                    height: 1,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    backgroundColor: 'red',
+                  }}
+                />,
+                <Text
+                  key="baseline text"
+                  style={{
+                    top: y + ascender,
+                    right: 0,
+                    position: 'absolute',
+                    color: 'red',
+                  }}>
+                  Baseline
+                </Text>,
+                <View
+                  key="capheight view"
+                  style={{
+                    top: y + ascender - capHeight,
+                    height: 1,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    backgroundColor: 'green',
+                  }}
+                />,
+                <Text
+                  key="capheight text"
+                  style={{
+                    top: y + ascender - capHeight,
+                    right: 0,
+                    position: 'absolute',
+                    color: 'green',
+                  }}>
+                  Capheight
+                </Text>,
+                <View
+                  key="xheight view"
+                  style={{
+                    top: y + ascender - xHeight,
+                    height: 1,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    backgroundColor: 'blue',
+                  }}
+                />,
+                <Text
+                  key="xheight text"
+                  style={{
+                    top: y + ascender - xHeight,
+                    right: 0,
+                    position: 'absolute',
+                    color: 'blue',
+                  }}>
+                  X-height
+                </Text>,
+                <View
+                  key="descender view"
+                  style={{
+                    top: y + ascender + descender,
+                    height: 1,
+                    left: 0,
+                    right: 0,
+                    position: 'absolute',
+                    backgroundColor: 'orange',
+                  }}
+                />,
+                <Text
+                  key="descender text"
+                  style={{
+                    top: y + ascender + descender,
+                    right: 0,
+                    position: 'absolute',
+                    color: 'orange',
+                  }}>
+                  Descender
+                </Text>,
+                <View
+                  key="end of text view"
+                  style={{
+                    top: y,
+                    height: height,
+                    width: 1,
+                    left: x + width,
+                    position: 'absolute',
+                    backgroundColor: 'brown',
+                  }}
+                />,
+                <Text
+                  key="end of text text"
+                  style={{
+                    top: y,
+                    left: x + width + 5,
+                    position: 'absolute',
+                    color: 'brown',
+                  }}>
+                  End of text
+                </Text>,
+              ];
+            },
+          )}
+          <Text
+            onTextLayout={event =>
+              this.setState({textMetrics: event.nativeEvent.lines})
+            }
+            style={{fontSize: 50}}>
+            {PANGRAMS[this.state.language]}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+}
+module.exports = TextLegend;

RNTester/js/TextExample.android.js

@@ -15,6 +15,7 @@ var ReactNative = require('react-native');
 var {Image, StyleSheet, Text, View} = ReactNative;
 var RNTesterBlock = require('./RNTesterBlock');
 var RNTesterPage = require('./RNTesterPage');
+const TextLegend = require('./Shared/TextLegend');
 
 class Entity extends React.Component<$FlowFixMeProps> {
   render() {
@@ -87,6 +88,9 @@ class TextExample extends React.Component<{}> {
             This text is indented by 10px padding on all sides.
           </Text>
         </RNTesterBlock>
+        <RNTesterBlock title="Text metrics legend">
+          <TextLegend />
+        </RNTesterBlock>
         <RNTesterBlock title="Font Family">
           <Text style={{fontFamily: 'sans-serif'}}>Sans-Serif</Text>
           <Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>