Diagonal line-through Text React-Native

Question

I am looking for a way to make a diagonal line through a text element on react-native.

with an :after element and css this should be possible but this is not available in react-native.

Anybody cool suggestions?

HarshitMadhav · Accepted Answer · 2019-06-07 05:55:37Z

6

Eventually, I went for a situation where I drew an absolute positioned line with a rotation on it.

<View
                style={{
                    position: 'absolute',
                    transform: [ {rotate: '17deg'} ],
                    top: 7,
                    width: 25,
                    height: 1,
                    borderBottomColor: styleGuide.errorColorRed,
                    borderBottomWidth: 1,
                }}/>

edited Jun 7, 2019 at 5:55

HarshitMadhav

5,1196 gold badges40 silver badges47 bronze badges

answered Jan 17, 2019 at 13:00

MokumJ

2013 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roozbeh Mohammadzadeh · Accepted Answer · 2019-01-11 10:58:25Z

0

if you want to make strick in text you should use something like this

<Text style={{ textDecorationLine: 'line-through' }}>$12</Text>

answered Jan 11, 2019 at 10:58

Roozbeh Mohammadzadeh

6896 silver badges22 bronze badges

2 Comments

Roozbeh Mohammadzadeh Over a year ago

also u can use this two props textDecorationColor: color (iOS) textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (iOS)

MokumJ Over a year ago

Sure but this will make it a horizontal line. I am looking for a way to make diagonal line-through. Thanks anyhow.

Cà phê đen · Accepted Answer · 2019-03-11 08:45:31Z

-1

You can try this:

style={{ textDecorationLine: 'line-through' }}

edited Mar 11, 2019 at 8:45

Cà phê đen

1,9512 gold badges22 silver badges20 bronze badges

answered Mar 11, 2019 at 7:08

Mohammed Fallah

8397 silver badges9 bronze badges

Collectives™ on Stack Overflow

Diagonal line-through Text React-Native

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related