diff --git a/RNTester/js/Shared/TextLegend.js b/RNTester/js/Shared/TextLegend.js
new file mode 100644
index 000000000..953c5ec4b
--- /dev/null
+++ b/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 (
+
+ this.setState({language: itemValue})}>
+ {Object.keys(PANGRAMS).map(x => (
+
+ ))}
+
+
+ {this.state.textMetrics.map(
+ ({
+ x,
+ y,
+ width,
+ height,
+ capHeight,
+ ascender,
+ descender,
+ xHeight,
+ }) => {
+ return [
+ ,
+
+ Baseline
+ ,
+ ,
+
+ Capheight
+ ,
+ ,
+
+ X-height
+ ,
+ ,
+
+ Descender
+ ,
+ ,
+
+ End of text
+ ,
+ ];
+ },
+ )}
+
+ this.setState({textMetrics: event.nativeEvent.lines})
+ }
+ style={{fontSize: 50}}>
+ {PANGRAMS[this.state.language]}
+
+
+
+ );
+ }
+}
+module.exports = TextLegend;
diff --git a/RNTester/js/TextExample.android.js b/RNTester/js/TextExample.android.js
index 93af4424c..482dd51e0 100644
--- a/RNTester/js/TextExample.android.js
+++ b/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.
+
+
+
Sans-Serif
diff --git a/RNTester/js/TextExample.ios.js b/RNTester/js/TextExample.ios.js
index 96a5325e4..5d10d4384 100644
--- a/RNTester/js/TextExample.ios.js
+++ b/RNTester/js/TextExample.ios.js
@@ -14,15 +14,8 @@ const Platform = require('Platform');
var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
-var {
- Image,
- Text,
- TextInput,
- View,
- LayoutAnimation,
- Button,
- Picker,
-} = ReactNative;
+var {Text, TextInput, View, LayoutAnimation, Button} = ReactNative;
+const TextLegend = require('./Shared/TextLegend');
type TextAlignExampleRTLState = {|
isRTL: boolean,
@@ -407,187 +400,6 @@ class TextWithCapBaseBox extends React.Component<*, *> {
}
}
-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 (
-
- this.setState({language: itemValue})}>
- {Object.keys(PANGRAMS).map(x => (
-
- ))}
-
-
- {this.state.textMetrics.map(
- ({
- x,
- y,
- width,
- height,
- capHeight,
- ascender,
- descender,
- xHeight,
- }) => {
- return [
- ,
-
- Baseline
- ,
- ,
-
- Capheight
- ,
- ,
-
- X-height
- ,
- ,
-
- Descender
- ,
- ,
-
- End of text
- ,
- ];
- },
- )}
-
- this.setState({textMetrics: event.nativeEvent.lines})
- }
- style={{fontSize: 50}}>
- {PANGRAMS[this.state.language]}
-
-
-
- );
- }
-}
exports.title = '';
exports.description = 'Base component for rendering styled text.';
exports.displayName = 'TextExample';