CODEWITHSUNDEEP
cssreact-nativemobilestyles
milk
milk

Reputation: 141

textDecoration: line-through not working in React Native styled component

I created a styled component

const StrikeThrough = styled(StandardText)`
    textDecoration: line-through;
`;

and called it with children, similar to <StrikeThrough>Write text here</StrikeThrough> but the text rendered doesn't have this decoration. Why might this be?

EDIT: Other things I've tried that don't work

const StrikeThrough = styled(StandardText)`
    textDecorationLine: line-through;
    textDecorationStyle: solid;
`;

const StrikeThrough = styled(StandardText)`
    text-decoration: line-through;
`;

EDIT: To answer my own question, it looks like I had to do it on the Text component and couldn't make a styled component on top of my styled component.

Upvotes: 3

Views: 2061

Answers (4)

Zahid Ali
Zahid Ali

Reputation: 81

Android does not support textDecorationColor for Text. As a workaround, you can use a View overlay to simulate the strike-through with a custom color for example:

<View style={{ position: 'relative' }}>
  <Text style={style}>{children}</Text>
  <View
    style={{
      position: 'absolute',
      height: 1,
      backgroundColor: 'red', // Custom color
      top: '50%',
      left: 0,
      right: 0,
    }}
  />
</View>

Upvotes: 0

Muhammad Haidar
Muhammad Haidar

Reputation: 2037

You are using Styled Component so use text-decoration instead of textDecoration and use dot instead of brackets:

const StrikeThrough = styled.Text`
    text-decoration: line-through;
`;

Upvotes: 0

Tijs Martens
Tijs Martens

Reputation: 296

use text-decoration: line-through;

you can also style the line with text-decoration-color: red

Upvotes: 0

Sagar Shakya
Sagar Shakya

Reputation: 654

Use text-decoration instead of textDecoration.

Upvotes: 1

Related Questions