Menu
Trying to replicate the below design but not able to. Will appreciate any help with this.
Code that I tried from my end is as below but the line overwrites the text.
<View>
<View style={{ alignSelf:'center', borderBottomColor:'black', borderBottomWidth:1,height:'50%', width:'90%' }}/>
<Text style={{ alignSelf:'center', paddingHorizontal:5 }}>Your class</Text>
</View>
583
Use the textDecoration property to strikethrough text in React, e.g. <span style={{textDecoration: 'line-through'}}> .
To create a horizontal line in React, you can add an hr element to the React component. The object style has the color, background-color and height . The color will give the line a solid color and the background-color for other properties.
Use the <hr /> tag and set the style prop on it. Set the height of the line and optionally set backGroundColor and color .
Made it works this way:
<View style={{flexDirection: 'row'}}>
<View style={{backgroundColor: 'black', height: 2, flex: 1, alignSelf: 'center'}} />
<Text style={{ alignSelf:'center', paddingHorizontal:5, fontSize: 24 }}>Your class</Text>
<View style={{backgroundColor: 'black', height: 2, flex: 1, alignSelf: 'center'}} />
</View>
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
