-1

I want to do a line like this one, but I don't know how (btw the text on the image is in spanish, but it does not matter).enter image description here

Matias Russo
  • 19
  • 1

3 Answers3

1

You can draw a separator with flexbox properties even with a text or view or anything you want in the center of the line.

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
  <View>
    <Text style={{textAlign: 'center', paddingHorizontal:8}}>Hello</Text>
  </View>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>

enter image description here

Bhavya Koshiya
  • 1,262
  • 2
  • 8
  • 22
0

Pls, take a look at this link. Hope it will help. Draw horizontal rule in React Native It can be done easily by installing packages. https://daisyui.com/components/divider/

R. Mahbub
  • 342
  • 6
  • 14
0

It can be done easily without adding any library. Here's an exmaple - https://snack.expo.dev/@arjunshukla97/divider

this.arjun
  • 330
  • 1
  • 4