Skip to content

Commit 335927d

Browse files
Mehdi Mulanifacebook-github-bot
Mehdi Mulani
authored and
facebook-github-bot
committed
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
1 parent 2c3e4ec commit 335927d

File tree

3 files changed

+203
-190
lines changed

3 files changed

+203
-190
lines changed

‎RNTester/js/Shared/TextLegend.js

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
* @flow
9+
*/
10+
11+
'use strict';
12+
13+
const React = require('React');
14+
const {Picker, Text, View} = require('react-native');
15+
16+
class TextLegend extends React.Component<*, *> {
17+
state = {
18+
textMetrics: [],
19+
language: 'english',
20+
};
21+
22+
render() {
23+
const PANGRAMS = {
24+
arabic:
25+
'صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت — يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ',
26+
chinese: 'Innovation in China 中国智造，慧及全球 0123456789',
27+
english: 'The quick brown fox jumps over the lazy dog.',
28+
emoji: '🙏🏾🚗💩😍🤯👩🏽‍🔧🇨🇦💯',
29+
german: 'Falsches Üben von Xylophonmusik quält jeden größeren Zwerg',
30+
greek: 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός',
31+
hebrew: 'דג סקרן שט בים מאוכזב ולפתע מצא חברה',
32+
hindi:
33+
'ऋषियों को सताने वाले दुष्ट राक्षसों के राजा रावण का सर्वनाश करने वाले विष्णुवतार भगवान श्रीराम, अयोध्या के महाराज दशरथ के बड़े सपुत्र थे।',
34+
igbo:
35+
'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',
36+
irish:
37+
'D’fhuascail Íosa Úrmhac na hÓighe Beannaithe pór Éava agus Ádhaimh',
38+
japanese:
39+
'色は匂へど 散りぬるを 我が世誰ぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず',
40+
korean:
41+
'키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다',
42+
norwegian:
43+
'Vår sære Zulu fra badeøya spilte jo whist og quickstep i min taxi.',
44+
polish: 'Jeżu klątw, spłódź Finom część gry hańb!',
45+
romanian: 'Muzicologă în bej vând whisky și tequila, preț fix.',
46+
russian: 'Эх, чужак, общий съём цен шляп (юфть) – вдрызг!',
47+
swedish: 'Yxskaftbud, ge vår WC-zonmö IQ-hjälp.',
48+
thai:
49+
'เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะๆ จ๋าๆ น่าฟังเอยฯ',
50+
};
51+
return (
52+
<View>
53+
<Picker
54+
selectedValue={this.state.language}
55+
onValueChange={itemValue => this.setState({language: itemValue})}>
56+
{Object.keys(PANGRAMS).map(x => (
57+
<Picker.Item
58+
label={x[0].toUpperCase() + x.substring(1)}
59+
key={x}
60+
value={x}
61+
/>
62+
))}
63+
</Picker>
64+
<View>
65+
{this.state.textMetrics.map(
66+
({
67+
x,
68+
y,
69+
width,
70+
height,
71+
capHeight,
72+
ascender,
73+
descender,
74+
xHeight,
75+
}) => {
76+
return [
77+
<View
78+
key="baseline view"
79+
style={{
80+
top: y + ascender,
81+
height: 1,
82+
left: 0,
83+
right: 0,
84+
position: 'absolute',
85+
backgroundColor: 'red',
86+
}}
87+
/>,
88+
<Text
89+
key="baseline text"
90+
style={{
91+
top: y + ascender,
92+
right: 0,
93+
position: 'absolute',
94+
color: 'red',
95+
}}>
96+
Baseline
97+
</Text>,
98+
<View
99+
key="capheight view"
100+
style={{
101+
top: y + ascender - capHeight,
102+
height: 1,
103+
left: 0,
104+
right: 0,
105+
position: 'absolute',
106+
backgroundColor: 'green',
107+
}}
108+
/>,
109+
<Text
110+
key="capheight text"
111+
style={{
112+
top: y + ascender - capHeight,
113+
right: 0,
114+
position: 'absolute',
115+
color: 'green',
116+
}}>
117+
Capheight
118+
</Text>,
119+
<View
120+
key="xheight view"
121+
style={{
122+
top: y + ascender - xHeight,
123+
height: 1,
124+
left: 0,
125+
right: 0,
126+
position: 'absolute',
127+
backgroundColor: 'blue',
128+
}}
129+
/>,
130+
<Text
131+
key="xheight text"
132+
style={{
133+
top: y + ascender - xHeight,
134+
right: 0,
135+
position: 'absolute',
136+
color: 'blue',
137+
}}>
138+
X-height
139+
</Text>,
140+
<View
141+
key="descender view"
142+
style={{
143+
top: y + ascender + descender,
144+
height: 1,
145+
left: 0,
146+
right: 0,
147+
position: 'absolute',
148+
backgroundColor: 'orange',
149+
}}
150+
/>,
151+
<Text
152+
key="descender text"
153+
style={{
154+
top: y + ascender + descender,
155+
right: 0,
156+
position: 'absolute',
157+
color: 'orange',
158+
}}>
159+
Descender
160+
</Text>,
161+
<View
162+
key="end of text view"
163+
style={{
164+
top: y,
165+
height: height,
166+
width: 1,
167+
left: x + width,
168+
position: 'absolute',
169+
backgroundColor: 'brown',
170+
}}
171+
/>,
172+
<Text
173+
key="end of text text"
174+
style={{
175+
top: y,
176+
left: x + width + 5,
177+
position: 'absolute',
178+
color: 'brown',
179+
}}>
180+
End of text
181+
</Text>,
182+
];
183+
},
184+
)}
185+
<Text
186+
onTextLayout={event =>
187+
this.setState({textMetrics: event.nativeEvent.lines})
188+
}
189+
style={{fontSize: 50}}>
190+
{PANGRAMS[this.state.language]}
191+
</Text>
192+
</View>
193+
</View>
194+
);
195+
}
196+
}
197+
module.exports = TextLegend;

‎RNTester/js/TextExample.android.js

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var ReactNative = require('react-native');
1515
var {Image, StyleSheet, Text, View} = ReactNative;
1616
var RNTesterBlock = require('./RNTesterBlock');
1717
var RNTesterPage = require('./RNTesterPage');
18+
const TextLegend = require('./Shared/TextLegend');
1819

1920
class Entity extends React.Component<$FlowFixMeProps> {
2021
render() {
@@ -87,6 +88,9 @@ class TextExample extends React.Component<{}> {
8788
This text is indented by 10px padding on all sides.
8889
</Text>
8990
</RNTesterBlock>
91+
<RNTesterBlock title="Text metrics legend">
92+
<TextLegend />
93+
</RNTesterBlock>
9094
<RNTesterBlock title="Font Family">
9195
<Text style={{fontFamily: 'sans-serif'}}>Sans-Serif</Text>
9296
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>

0 commit comments

Comments
 (0)