React-sketchapp: Text Decoration Property

[davixyz]

| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| -------------------------------------------------------------------------------------------------

Hi, i'm trying to use the textDecoration property to set underline to a text contained in a button.
The button is made using a <Text /> element with the appropriate styles. First I tried to add the property to the root like this <Text style={{ textDecoration: 'underline' }}>some text</Text> but it didn't work. Proceeded to separate the styles and try to style directly the children but no luck.

I also couldn't see the support of the property in here:
http://airbnb.io/react-sketchapp/docs/styling.html

Expected behavior:

Observed behavior:

How to reproduce:

const Button = ({ text, style }) => {
  return (
    <Text
      style={style}
      name="container"
    >
      <Text style={{ textDecoration: 'underline'}}>
        {text}
      </Text>
    </Text>
  );
};

Sketch version:
44.1

[jongold]

Thanks for the report!

Looks like React Native has a slightly different syntax for text decoration — textDecorationLine, textDecorationColor, textDecorationStyle. My guess is that these haven't been implemented yet either, but thanks for alerting us to it 🙏

[davixyz]

@jongold is there any place I could start looking into this? I would like to contribute but honestly I don't know where to start over this. Let me know if you have any thoughts around this.

[jongold]

for sure!

basic workflow I'd suggest:

• save & close any sketch files you have open!
• install copy-sketch-json
• make a barebones sketch file just with one text layer w/ underline
• use that plugin to copy the JSON to your text editor (or a JSON viewer); dig through it to see what JSON you need to generate for an underline
• clone the main repo, if you don't have it already, and npm install all the dependencies etc
• poke around src/jsonUtils/textLayers.js to see the corresponding portion of JSON, make the changes
• to test it out, in the root of react-sketchapp npm link and then npm run watch
• open a new terminal, go into one of the examples/ folders, npm install, npm link react-sketchapp, npm run render
• open that example in your editor and add the corresponding react code — <Text style={{textDecorationLine: 'underline'}}…
• see if it works / crashes Sketch / etc, rinse, repeat :D

[davixyz]

Addressing this issue here:
https://github.com/airbnb/react-sketchapp/pull/143

[spjpgrd]

I'm guessing this can be closed since @davidseik worked on this:
https://github.com/airbnb/react-sketchapp/pull/143