How to align text with line? - react-native

Question

I want to achieve this below thing. Putting text between two lines. But I am failing to do so far.
.
So far what I achieved is look like this
My code is
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View
style={{
width: Dimensions.get('screen').width / 2 - 20,
height: 3,
borderStyle: 'solid',
backgroundColor: 'black',
marginBottom: 15,
marginTop: 8,
left: 0,
}}
/>
<Text
style={[
{
fontSize: 18,
padding: 5,
marginBottom: 10,
color: 'black',
},
global.fontNormal,
]}>
{'or'}
</Text>
<View
style={{
width: Dimensions.get('screen').width / 2 - 20,
height: 3,
borderStyle: 'solid',
backgroundColor: 'black',
marginBottom: 15,
marginTop: 8,
right: 0,
}}
/>
</View>
Is there a better way to achieve that?
Suggest me how to achieve that?
Thanks,

Answer 1

Need to add alignItems:'center'
As when you make the flex direction row then the alignitems property aline the content vertically and justifycontents aline items horizontally
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex:1 , alignItems:'center'}}>
Sample code: https://snack.expo.io/#msbot01/center-line