I am doing this to make a verticle line in between two numbers:
<View style={styles.ridesFriends}><Text style={styles.numbers}>132</Text><View style={styles.verticleLine}></View><Text style={styles.numbers}>2</Text></View> ridesFriends: { paddingTop: 60, alignItems: 'center', flexDirection: 'row', justifyContent: 'space-evenly', // marginLeft: 2, // marginRight: 3, width: '100%', }, numbers: { fontSize: 30, color: '#31C283', fontWeight: 'bold', }, verticleLine: { height: '100%', width: 1, backgroundColor: '#909090', }However, the line doesn't appear in the exact middle. This is because 132 is longer than the number 2. If I change 132 to just 3, then the line appears in the center. Is there any way to fix the line in the middle?
Updated:
<View style={styles.ridesFriends}> {/* <View style={styles.numbersContainer}> */}<Text style={styles.numbers}>132</Text><View style={styles.verticleLine}></View><Text style={styles.numbers}>{numberOfFriends}</Text> {/* </View> */}</View> ridesFriends: { paddingTop: 60, alignItems: 'center', flexDirection: 'row', justifyContent: 'space-evenly', // marginLeft: 2, // marginRight: 3, width: '100%', }, numbersContainer: { alignItems: 'center', justifyContent: 'center', flex: 1, }, num1: { fontSize: 30, color: '#31C283', fontWeight: 'bold', borderRightWidth: 1, borderColor: '#909090', }, numbers: { fontSize: 30, color: '#31C283', fontWeight: '900', textShadowColor: '#000000', textShadowRadius: 0.5, }, verticleLine: { height: '100%', width: 1, backgroundColor: '#E0E0E0', //position: 'fixed', },