Keep Two Text Values Vertically aligned in React Native

Question

I'm doing a project where I have to manage 6 texts values. Each pair has to be aligned vertically. As an example check below.

 Latest    Old     New
  6M       10      20K

As shown in above example, Text Value call Latest has to be aligned with 6M where 6M text value change over time. So keeping these two text values vertically aligned is a must. Same concept applies to other two columns.

Also, Since there are 3 columns only, These should evenly use Device display width.

My Code

<View style={{flexDirection:'row'}}>
  <View style={{flexDirection:'column'}}>
     <View style={{flexDirection:'column',alignItems:'flex-start',paddingTop:1,paddingBottom:3}}>
     {
        this.state.fontLoaded ? (
        <Text style={{fontSize:14,minWidth:getWidth()*0.25}}>Latest</Text>    // Select K or M or B or T
        ) : null
     }
     </View>
     <View style={{flexDirection:'column',alignItems:'flex-start',paddingTop:1,paddingBottom:3}}>
     {
         this.state.fontLoaded ? (
         <Text>6M</Text>    // Select K or M or B or T
         ) : null
     }
  </View>
 </View>
</View>

getWidth() function returns Device display width. I wanted to make this program responsive to all iOS and Android display sizes. That's why I used getWidth() function.

Output

Below sketch kind of similar to what I receive by above code.

Latest
    6M

Problem

As in above code, when I change 6M value, it does not align with Latest text. Also if I duplicate above code to generate other two columns, It makes everything a mess. What am I missing here? How can I change my code to get what I required?

Answer 1

您将需要使用Flexbox {justifyContent：'space-evenly'}或{justifyContent：'space-between'}和文本样式 {textAlign：'right'}

Answer 2

You can try out this code.

 import React, { Component } from 'react'; import { View, Button, Text, } from 'react-native'; export default class VerticalAlignText extends Component { constructor(props: Object) { super(props); this.state = { data: [ { "id": "1", "lable": "Latest", "value": "6M" }, { "id": "2", "lable": "Old", "value": "10" }, { "id": "3", "lable": "New", "value": "20K" }, ] } }; renderData() { return ( <View style={{flex:1, flexDirection:'row',}}> {this.state.data.map((item) => <View key={item.id} style={{ flex:1, alignItems:"center" }}> <Text> {item.lable}</Text> <Text> {item.value}</Text> </View> )} </View> ) } handleOnPress(){ let clonedData = this.state.data.slice(); clonedData.map((item)=>{ if(item.lable === "Latest"){ item.value = item.value === "50K" ? "6M" : "50K"; } return item; }) this.setState({data: clonedData}); } render() { return ( <View style={{ flex: 1, backgroundColor: "#0d98ba" }}> {this.state.data.length ? this.renderData() : null} <Button onPress={()=> this.handleOnPress()} title={"changeLatest"} color="#841584" accessibilityLabel="Learn more about this purple button" /> </View> ); } }