Line before and after text in React Native app


How to style Text in React Native app like on the screenshot? It’s like line before and line after the text. I have some ideas to style with :before and :after pseudo elements, but this elements don’t exist in React Native.


Some ideas?


To style your text with a horizontal rule appearing around it, you can put your text in a view like this:

      <View style={{alignSelf:'center',position:'absolute',borderBottomColor:'black',borderBottomWidth:1,height:'50%',width:'90%'}}/>
      <Text style={{alignSelf:'center',paddingHorizontal:5}}>Your text here</Text>

Answered By – nating

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published