draw a vertical line between 2 objects

Admin 1
Viewed 17903

Is it possible to draw a vertical line between 2 text objects? I looked into this but this is not exactly what I need:

https://reactjsexample.com/draw-a-line-between-two-elements-in-react/

enter image description here

 <View style={styles.ridesFriends}>
          <Text style={styles.numbers}>132    </Text>
          <Text style={styles.numbers}>{numberOfFriends}</Text>
        </View>

  ridesFriends: {
    paddingTop: 70,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    width: '100%',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },

Edit:

I tried adding a view in between the two numbers:

  verticleLine:{
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  },

  <View style={styles.ridesFriends}>
          <Text style={styles.numbers}>132</Text>
          <View style={styles.verticleLine}></View>
          <Text style={styles.numbers}>{numberOfFriends}</Text>
        </View>

but it's not in the center enter image description here

react-native typescript reactjs css javascript
3 Answers

One way to do this is to create a view then give it a height of 100%, width of 1px and background-colour. Then proceed to place this View in-between the two elements.

enter image description here

 <View style={styles.ridesFriends}>
    <Text style={styles.numbers}>132</Text>
    <View style={styles.verticleLine}></View>
    <Text style={styles.numbers}>2</Text>
 </View>

ridesFriends: {
    paddingTop: 70,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    width: '100%',
    marginBottom: 20,
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },
  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  }
user_112928570

You can simply give the object on the left (styles.numbers) a border-right: 1px solid gray;. You can do that for all items in a row, and you can make a condition to remove the border for the "last child".

user_79924670 
<View style={styles.ridesFriends}>
   <div className="wrapper">
      <Text className="text1" style={styles.numbers}>132</Text>
      <View className="view" style={styles.verticleLine}></View>
      <Text className="text2" style={styles.numbers}>{numberOfFriends}</Text>
   </div>       
 </View>

css file

.wrapper{
   width:100%;
}
.text1{
   width: 49%;
}
.text2{
   width: 49%;
}
.view{
  width:2%;
}

you can use this code,to give both the text equal space and line will be in center

Hope it helps

user_106238320
Related