Question 34691 in React native Question posted in
The official React Native documentation can be found here.

How do I do a separator line with a dot in the middle on react native?

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

Tags:

3

Answers


  1. 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/

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search