'React Native line-through not centered

The strike through is not vertically centered.

My code is like this:

<Text style={{textDecorationLine: 'line-through', alignSelf: 'center', fontFamily: constants.FONTBOLD, color: constants.ORANGE, fontSize: 16}}>

enter image description here



Solution 1:[1]

well, we couldn't actually find a solution with the textDecoration property. But we did a work-around by placing absolutely a View. Like this (pseudo code)

const styles = StyleSheet.create({
  parent: {
   position: relative, 
  },
  halfLine: {
    width: "100%",
    top: 0,
    height: "35%",
    borderBottomColor: "black",
    borderBottomWidth: 1,
    position: "absolute",
  },


<View class={styles.parent}>
 <View class={styles.halfLine} />
 <Copy> $100 </Copy>
</View>```

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nadine Thery