[Text] Add textDecoration style attributes #845

KJlmfe · 2015-04-14T13:00:37Z

I add textDecorationLine, textDecorationStyle, textDecorationColor style property for Text module.

And it follows the CSS naming convention and using method is same with CSS.

textDecorationLine refers to: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
textDecorationStyle refers to: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
textDecorationColorrefers to: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

Here is a simple demo:

<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}>
  Solid underline
</Text>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
  Double underline with custom color
</Text>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
  Dashed underline with custom color
</Text>
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
  Dotted underline with custom color
</Text>
<Text style={{textDecorationLine: 'none'}}>
  None textDecoration
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
  Solid line-through
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
  Double line-through with custom color
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
  Dashed line-through with custom color
</Text>
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
  Dotted line-through with custom color
</Text>
<Text style={{textDecorationLine: 'underline line-through'}}>
  Both underline and line-through
</Text>

vjeux · 2015-04-14T23:22:36Z

Thanks for the pull request! Would be nice to follow the CSS naming convention for this
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

And, if you can provide a jsfiddle that shows that the code works on a span on the web that would be awesome!

KJlmfe · 2015-04-15T03:26:03Z

@vjeux I changed the property name to follow the text-decoration-style, such as "solid", "double", "dashed", "dotted".

And, text-decoration-style is only support on firefox. So the jsfiddle web demo is not really needed.

vjeux · 2015-04-15T03:40:10Z

We're trying to use web naming whenever possible, even if it's not implemented everywhere. This way we can redirect users to mdn documentation, and don't have to bikeshed on naming.

bakso · 2015-04-15T04:50:43Z

That's awesome!
I desire this feature for a long time!

KJlmfe · 2015-04-15T12:26:21Z

@vjeux I rewrite the code and change the pull request title and content. Now it follows the CSS naming convention and using method is same with CSS.

And here is working on web demo: https://jsfiddle.net/kjlmfe/a1zvL6s8/1/ (Only for firefox)

luics · 2015-04-16T07:37:31Z

cool

mariodu · 2015-04-16T07:38:00Z

cool

liangfeidotme · 2015-04-17T06:25:45Z

awesome ! DiaoZhaTian

SoXeon · 2015-04-17T06:27:47Z

66666!

imochen · 2015-04-17T06:29:08Z

看到，吊炸天。。。

brentvatne · 2015-06-01T19:28:18Z

@sahrens - looked at the git blame and wasn't quite sure who to assign here, your name stood out so I just added you, re-assign if I'm off.

@KJlmfe - thanks! can we get a rebase?

sahrens · 2015-06-01T20:09:38Z

Looks great! Can you rebase, squash your commits, and re-record the TextExample snapshot test? Set reRecord yes here and run with cmd+U:

https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerTests/UIExplorerTests.m#L97

Also, assigning over to @a2 who is our Text master.

cssoul · 2015-06-02T09:33:28Z

well done~

KJlmfe · 2015-06-03T11:30:14Z

@sahrens I had merge branch 'facebook/react-native/master' into my master and resolve the conflicts.

brentvatne · 2015-06-15T22:32:43Z

@KJlmfe - instead of merging could you do a git rebase -i to squash the commits into one? See this guide

brentvatne · 2015-06-23T23:49:23Z

@KJlmfe - I'm confused about what's going on here, I will close this but will happily re-open if you rebase and squash into one commit! Thanks 😄

KJlmfe · 2015-06-29T08:03:51Z

@brentvatne I had rebased and squashed into one commit!

See it KJlmfe@fdaca5d

pcottle · 2015-06-30T04:02:10Z

Can we reopen this? Would be sweet to get underlining in :D

MossP · 2015-07-03T11:46:20Z

did this ever get merged?

pcottle · 2015-07-04T17:50:53Z

I threw up a fresher version of this over at #1869 that was rebased, hopefully once the Travis CI build is green we can merge!

@KJlmfe

Summary: This is simply a rebased and squashed version of @KJlmfe's PR over at facebook#845 It was actually already squashed into one commit, but for some reason that was hard to see from the original PR. Closes facebook#1869 Github Author: KJlmfe <[email protected]>

pcottle · 2015-07-11T21:58:34Z

Woohoo! this made it into the v0.8.0-rc release:
https://github.com/facebook/react-native/releases/tag/v0.8.0-rc

underline all the things

MossP · 2015-07-11T22:05:14Z

👍

MossP · 2015-07-14T10:10:28Z

Does it work for you, @pcottle? I don't seem to be seeing any text decoration.

ide · 2015-07-14T10:26:11Z

It's working in the UIExplorer.

MossP · 2015-07-14T10:33:36Z

Ah, it seems that my project has reverted to 0.7.1 somewhere along the line. Apologies. I'll go try again.

MossP · 2015-07-14T11:07:04Z

That fixed it, thanks @ide. Sorry for the newbie error.

@KJlmfe

Summary: This is simply a rebased and squashed version of @KJlmfe's PR over at facebook#845 It was actually already squashed into one commit, but for some reason that was hard to see from the original PR. Closes facebook#1869 Github Author: KJlmfe <[email protected]>

herbertdai · 2016-02-17T08:07:22Z

Does it support Android in 0.19.0?

pewh · 2017-06-06T06:40:58Z

Hello, what's the current status of this? I need textDecorationColor props & it didn't work on RN 0.44

* Initial conversion to issue forms * Updates to issue forms * Issue form must have non-empty title * Replace bug report markdown

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 14, 2015

KJlmfe mentioned this pull request Apr 14, 2015

how to put line through text ? #753

Closed

KJlmfe changed the title ~~<Text> module style add strikeThrough and strikeThroughColor~~ Add "textDecorationLine, textDecorationStyle, textDecorationColor" style property for <Text> module Apr 15, 2015

vjeux added the Needs Review label Apr 17, 2015

brentvatne assigned sahrens Jun 1, 2015

brentvatne changed the title ~~Fix #753 , Add "textDecorationLine, textDecorationStyle, textDecorationColor" style property for <Text> module~~ [Text] Add textDecoration style attributes Jun 1, 2015

sahrens assigned a2 and unassigned sahrens Jun 1, 2015

sahrens added GH Review: needs-revision and removed GH Review: review-needed labels Jun 1, 2015

facebook-github-bot added GH Review: review-needed and removed GH Review: needs-revision labels Jun 3, 2015

<Text> module style add strikeThrough and strikeThroughColor

34d270a

brentvatne closed this Jun 23, 2015

pcottle mentioned this pull request Jul 4, 2015

<Text> module add textDecoration style attributes #1869

Closed

herbertdai unassigned a2 Feb 17, 2016

acoates-ms pushed a commit to acoates-ms/react-native that referenced this pull request Oct 26, 2021

Convert to issue forms (facebook#845)

3203279

* Initial conversion to issue forms * Updates to issue forms * Issue form must have non-empty title * Replace bug report markdown

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Text] Add textDecoration style attributes #845

[Text] Add textDecoration style attributes #845

KJlmfe commented Apr 14, 2015

vjeux commented Apr 14, 2015

KJlmfe commented Apr 15, 2015

vjeux commented Apr 15, 2015

bakso commented Apr 15, 2015

KJlmfe commented Apr 15, 2015

luics commented Apr 16, 2015

mariodu commented Apr 16, 2015

liangfeidotme commented Apr 17, 2015

SoXeon commented Apr 17, 2015

imochen commented Apr 17, 2015

brentvatne commented Jun 1, 2015

sahrens commented Jun 1, 2015

cssoul commented Jun 2, 2015

KJlmfe commented Jun 3, 2015

brentvatne commented Jun 15, 2015

brentvatne commented Jun 23, 2015

KJlmfe commented Jun 29, 2015

pcottle commented Jun 30, 2015

MossP commented Jul 3, 2015

pcottle commented Jul 4, 2015

pcottle commented Jul 11, 2015

MossP commented Jul 11, 2015

MossP commented Jul 14, 2015

ide commented Jul 14, 2015

MossP commented Jul 14, 2015

MossP commented Jul 14, 2015

herbertdai commented Feb 17, 2016

pewh commented Jun 6, 2017 •

edited

Loading

[Text] Add textDecoration style attributes #845

[Text] Add textDecoration style attributes #845

Conversation

KJlmfe commented Apr 14, 2015

vjeux commented Apr 14, 2015

KJlmfe commented Apr 15, 2015

vjeux commented Apr 15, 2015

bakso commented Apr 15, 2015

KJlmfe commented Apr 15, 2015

luics commented Apr 16, 2015

mariodu commented Apr 16, 2015

liangfeidotme commented Apr 17, 2015

SoXeon commented Apr 17, 2015

imochen commented Apr 17, 2015

brentvatne commented Jun 1, 2015

sahrens commented Jun 1, 2015

cssoul commented Jun 2, 2015

KJlmfe commented Jun 3, 2015

brentvatne commented Jun 15, 2015

brentvatne commented Jun 23, 2015

KJlmfe commented Jun 29, 2015

pcottle commented Jun 30, 2015

MossP commented Jul 3, 2015

pcottle commented Jul 4, 2015

pcottle commented Jul 11, 2015

MossP commented Jul 11, 2015

MossP commented Jul 14, 2015

ide commented Jul 14, 2015

MossP commented Jul 14, 2015

MossP commented Jul 14, 2015

herbertdai commented Feb 17, 2016

pewh commented Jun 6, 2017 • edited Loading

pewh commented Jun 6, 2017 •

edited

Loading