Skip to content

Commit 188208a

Browse files
ebraggerozele
ebragge
authored and
rozele
committed
fix(ReactTextView): Add support for additional properties
'backgroundColor', 'letterSpacing', 'textAlign', 'textDecoration', 'numberOfLines' and 'lineHeight' properties added. 1) Currenly only 'underline' decoration is supported. 2) Nested background color is not supported. - PR comments implemented Fixes microsoft#375, microsoft#376, microsoft#377, microsoft#378, microsoft#379, microsoft#380
1 parent 7d630ce commit 188208a

File tree

5 files changed

+328
-14
lines changed

5 files changed

+328
-14
lines changed

‎Examples/UIExplorer/TextExample.windows.js

Lines changed: 160 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/**
1+
/**
22
* The examples provided by Facebook are for non-commercial testing and
33
* evaluation purposes only.
44
*
@@ -162,6 +162,48 @@ exports.examples = [
162162
</View>
163163
);
164164
},
165+
}, {
166+
title: 'Background color',
167+
render: function() {
168+
return (
169+
<View>
170+
<Text style={{backgroundColor: '#ffaaaa'}}>
171+
Red background,
172+
<Text style={{backgroundColor: '#aaaaff'}}>
173+
{' '}blue background,
174+
<Text>
175+
{' '}inherited blue background,
176+
<Text style={{backgroundColor: '#aaffaa'}}>
177+
{' '}nested green background.
178+
</Text>
179+
</Text>
180+
</Text>
181+
</Text>
182+
<View flexDirection={'row'}>
183+
<View flexDirection={'row'} style={{backgroundColor: '#ffaaaa'}}>
184+
<Text>
185+
Red background,
186+
</Text>
187+
<View flexDirection={'row'} style={{backgroundColor: '#aaaaff'}}>
188+
<Text>
189+
{' '}blue background,
190+
</Text>
191+
<View flexDirection={'row'}>
192+
<Text>
193+
{' '}inherited blue background,
194+
</Text>
195+
<View flexDirection={'row'} style={{backgroundColor: '#aaffaa'}}>
196+
<Text>
197+
{' '}nested green background.
198+
</Text>
199+
</View>
200+
</View>
201+
</View>
202+
</View>
203+
</View>
204+
</View>
205+
);
206+
},
165207
}, {
166208
title: 'Font Weight',
167209
render: function() {
@@ -239,6 +281,72 @@ exports.examples = [
239281
</View>
240282
);
241283
},
284+
}, {
285+
title: 'Text Decoration',
286+
render: function() {
287+
return (
288+
<View>
289+
<Text style={{textDecorationLine: 'underline'}}>
290+
Solid underline
291+
</Text>
292+
<Text style={{textDecorationLine: 'none'}}>
293+
None textDecoration
294+
</Text>
295+
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
296+
Solid line-through
297+
</Text>
298+
<Text style={{textDecorationLine: 'underline line-through'}}>
299+
Both underline and line-through
300+
</Text>
301+
<Text>
302+
Mixed text with <Text style={{textDecorationLine: 'underline'}}>underline</Text> and <Text style={{textDecorationLine: 'line-through'}}>line-through</Text> text nodes
303+
</Text>
304+
</View>
305+
);
306+
},
307+
}, {
308+
title: 'Text Align',
309+
render: function() {
310+
return (
311+
<View>
312+
<Text>
313+
auto (default) - english LTR
314+
</Text>
315+
<Text>
316+
أحب اللغة العربية auto (default) - arabic RTL
317+
</Text>
318+
<Text style={{textAlign: 'left'}}>
319+
left left left left left left left left left left left left left left left
320+
</Text>
321+
<Text style={{textAlign: 'center'}}>
322+
center center center center center center center center center center center
323+
</Text>
324+
<Text style={{textAlign: 'right'}}>
325+
right right right right right right right right right right right right right
326+
</Text>
327+
</View>
328+
);
329+
},
330+
}, {
331+
title: 'Letter Spacing',
332+
render: function() {
333+
return (
334+
<View>
335+
<Text style={{letterSpacing: 0}}>
336+
letterSpacing = 0
337+
</Text>
338+
<Text style={{letterSpacing: 2, marginTop: 5}}>
339+
letterSpacing = 2
340+
</Text>
341+
<Text style={{letterSpacing: 9, marginTop: 5}}>
342+
letterSpacing = 9
343+
</Text>
344+
<Text style={{letterSpacing: -1, marginTop: 5}}>
345+
letterSpacing = -1
346+
</Text>
347+
</View>
348+
);
349+
},
242350
}, {
243351
title: 'Unicode',
244352
render: function() {
@@ -276,6 +384,26 @@ exports.examples = [
276384
</Text>
277385
);
278386
},
387+
}, {
388+
title: 'Line Height',
389+
render: function() {
390+
return (
391+
<View>
392+
<Text style={{lineHeight: 35}}>
393+
35 - Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
394+
</Text>
395+
<Text style={{lineHeight: 35}}>
396+
35 - Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
397+
</Text>
398+
<Text style={{lineHeight: 100}}>
399+
100 - Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
400+
</Text>
401+
<Text style={{lineHeight: 100}}>
402+
100 - Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
403+
</Text>
404+
</View>
405+
);
406+
},
279407
}, {
280408
title: 'Empty Text',
281409
description: 'It\'s ok to have Text with zero or null children.',
@@ -284,6 +412,37 @@ exports.examples = [
284412
<Text />
285413
);
286414
},
415+
}, {
416+
title: 'numberOfLines attribute',
417+
render: function() {
418+
return (
419+
<View>
420+
<Text numberOfLines={1}>
421+
Maximum of one line no matter now much I write here.
422+
Maximum of one line no matter now much I write here.
423+
Maximum of one line no matter now much I write here.
424+
If I keep writing it{"'"}ll just truncate after one line
425+
</Text>
426+
<Text numberOfLines={2} style={{marginTop: 20}}>
427+
Maximum of two lines no matter now much I write here.
428+
Maximum of two lines no matter now much I write here.
429+
Maximum of two lines no matter now much I write here.
430+
Maximum of two lines no matter now much I write here.
431+
If I keep writing it{"'"}ll just truncate after two lines
432+
</Text>
433+
<Text style={{marginTop: 20}}>
434+
No maximum lines specified no matter now much I write here.
435+
No maximum lines specified no matter now much I write here.
436+
No maximum lines specified no matter now much I write here.
437+
No maximum lines specified no matter now much I write here.
438+
No maximum lines specified no matter now much I write here.
439+
No maximum lines specified no matter now much I write here.
440+
No maximum lines specified no matter now much I write here.
441+
If I keep writing it{"'"}ll just keep going and going
442+
</Text>
443+
</View>
444+
);
445+
},
287446
}, {
288447
title: 'Toggling Attributes',
289448
render: function(): ReactElement {

‎ReactWindows/ReactNative/UIManager/ViewProps.cs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,15 @@ public static class ViewProps
5454
public const string FontWeight = "fontWeight";
5555
public const string FontStyle = "fontStyle";
5656
public const string FontFamily = "fontFamily";
57+
public const string LetterSpacing = "letterSpacing";
5758
public const string LineHeight = "lineHeight";
5859
public const string NeedsOffscreenAlphaCompositing = "needsOffscreenAlphaCompositing";
5960
public const string NumberOfLines = "numberOfLines";
6061
public const string Value = "value";
6162
public const string ResizeMode = "resizeMode";
6263
public const string TextAlign = "textAlign";
6364
public const string TextAlignVertical = "textAlignVertical";
65+
public const string TextDecorationLine = "textDecorationLine";
6466

6567
public const string BorderWidth = "borderWidth";
6668
public const string BorderLeftWidth = "borderLeftWidth";

0 commit comments

Comments
 (0)