Line before and after text in React Native app

Issue

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.

screenshot

Some ideas?

Solution

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

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

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