Line with text in react native without using a library

Question

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>

Val · Accepted Answer · 2017-12-18 06:26:04Z

36

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>

answered Dec 18, 2017 at 6:26

Val

22.9k11 gold badges72 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

Line with text in react native without using a library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related