[Text] Add textDecoration style attributes

[KJlmfe]

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

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

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

Here is a simple demo:

<Textstyle={{textDecorationLine: 'underline',textDecorationStyle: 'solid'}}>
Solid underline
</Text><Textstyle={{textDecorationLine: 'underline',textDecorationStyle: 'double',textDecorationColor: '#ff0000'}}>Doubleunderlinewithcustomcolor</Text><Textstyle={{textDecorationLine: 'underline',textDecorationStyle: 'dashed',textDecorationColor: '#9CDC40'}}>
Dashed underline with custom color
</Text><Textstyle={{textDecorationLine: 'underline',textDecorationStyle: 'dotted',textDecorationColor: 'blue'}}>Dottedunderlinewithcustomcolor</Text><Textstyle={{textDecorationLine: 'none'}}>
None textDecoration
</Text><Textstyle={{textDecorationLine: 'line-through',textDecorationStyle: 'solid'}}>Solidline-through</Text><Textstyle={{textDecorationLine: 'line-through',textDecorationStyle: 'double',textDecorationColor: '#ff0000'}}>
Double line-through with custom color
</Text><Textstyle={{textDecorationLine: 'line-through',textDecorationStyle: 'dashed',textDecorationColor: '#9CDC40'}}>Dashedline-throughwithcustomcolor</Text><Textstyle={{textDecorationLine: 'line-through',textDecorationStyle: 'dotted',textDecorationColor: 'blue'}}>
Dotted line-through with custom color
</Text><Textstyle={{textDecorationLine: 'underline line-through'}}>Bothunderlineandline-through</Text>



[vjeux]

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]

@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]

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]

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

[KJlmfe]

@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]

cool

[mariodu]

cool

[liangfeidotme]

awesome ! DiaoZhaTian

[SoXeon]

66666!

[imochen]

看到，吊炸天。。。

[brentvatne]

@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]

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]

well done~

[KJlmfe]

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

[brentvatne]

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

[brentvatne]

@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]

@brentvatne I had rebased and squashed into one commit!

See it KJlmfe@fdaca5d

[pcottle]

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

[MossP]

did this ever get merged?

[pcottle]

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!

[pcottle]

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]

👍

[MossP]

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

[ide]

It's working in the UIExplorer.

[MossP]

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

[MossP]

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

[herbertdai]

Does it support Android in 0.19.0?

[pewh]

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