[SOLVED] 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

Answer Checked By – Timothy Miller (BugsFixing Admin)

Leave a Reply

Your email address will not be published.