How to align texts to each Textinput - React Native

Question

I want those texts in the left to be aligned to my Textinputs on the right. I am fetching textinputs and texts from api so they are dynamic. I need to display each text on the left side of the texinput. Here is my code:

 textfieldsObject = () => {
    const obje = this.props.navigation.state.params.item;
    var keyvalue_to_json = JSON.parse(obje.keyValues);
    var textinputName = [];
    var foundTextFields = [];

    for (let i = 0; i < keyvalue_to_json.inputFields.length; i++) {
        if (keyvalue_to_json.inputFields[i].type === 'textfield') {
            foundTextFields.push(<TextInput placeholder={keyvalue_to_json.inputFields[i].placeholderText} style={styles.inputFields}
                onEndEditing={(e) => {
                    keyvalue_to_json.inputFields[i].inputValues = e.nativeEvent.text;
                    this.myInputFields.myTextFields[i] = keyvalue_to_json.inputFields[i];
                }}
            ></TextInput>) &&
                textinputName.push(<Text style={{ textAlign: 'left', flex: 2 }}>{keyvalue_to_json.inputFields[i].title}</Text>)
        }
    }
    return (
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
            <View style={{ flex: 1 }}>
                {textinputName}
            </View>
            <View style={{ flex: 1 }}>
                {foundTextFields}
            </View>
        </View>
    )
}

Answer 1

I have write small piece of code . You can try this code. It may solve your problem. Please also check this code into snack and directly run to scan QR using Expo app. Please c

import * as React from 'react';
import { TextInput, Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'Full name'}
          </Text>
          <TextInput
           placeholder='Enter Your Full Name'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}/>

        </View>
         <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'CRP Number'}
          </Text>
          <TextInput
          placeholder='Enter Your CRP Number'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}/>

        </View>
         <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'Company Name'}
          </Text>
          <TextInput
             placeholder='Enter Your Company Name'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}/>

        </View>
         <View
          style={{
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
            alignContent: 'center',
            flexDirection: 'row',
          }}>
          <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
            {'Company CVR '}
          </Text>
          <TextInput
          placeholder='Enter Your company CVR'
          placeholderTextColor='#303030'
            style={{
              borderWidth: 1,
              borderColor: '#000',
              flex: 1,
              padding: 15,
            }}>
            {'Enter Your company CVR'}
          </TextInput>
        </View>

        <Text style={{ color:'#fff',borderRadius:50, width:300, height:50, textAlign:'center', padding:15, marginTop:70,backgroundColor:'#00b5ec'}}>{"Click to sign in"}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    marginTop: 10,
    marginRight:1
  },
});

Updated Answer Please Check

import * as React from 'react';
import { FlatList, TextInput, Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jsonData: [
        { id: 1, textName: 'Hello', textInputName: 'Full Name' },
        {
          id: 2,
          textName: 'Hello',
          textInputName: 'Last Name',
        },
        {
          id: 3,
          textName: 'Hello',
          textInputName: 'Date of Birth',
        },
        {
          id: 4,
          textName: 'Hello',
          textInputName: 'Address',
        },
        { id: 1, textName: 'Hello', textInputName: 'Full Name' },
        {
          id: 2,
          textName: 'Hello',
          textInputName: 'Last Name',
        },
        {
          id: 3,
          textName: 'Hello',
          textInputName: 'Date of Birth',
        },
        {
          id: 4,
          textName: 'Hello',
          textInputName: 'Address',
        },
        { id: 1, textName: 'Hello', textInputName: 'Full Name' },
        {
          id: 2,
          textName: 'Hello',
          textInputName: 'Last Name',
        },
        {
          id: 3,
          textName: 'Hello',
          textInputName: 'Date of Birth',
        },
        {
          id: 4,
          textName: 'Hello',
          textInputName: 'Address',
        },
      ],
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ width: '100%', flex: 1 }}
          data={this.state.jsonData}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => (
            <View
              style={{
                justifyContent: 'center',
                alignSelf: 'center',
                alignItems: 'center',
                alignContent: 'center',
                flexDirection: 'row',
              }}>
              <Text style={{ textAlign: 'center', flex: 1, padding: 15 }}>
                {item.textName}
              </Text>
              <TextInput
                placeholder={item.textInputName}
                placeholderTextColor="#303030"
                style={{
                  borderWidth: 1,
                  borderColor: '#000',
                  flex: 1,
                  padding: 15,
                }}
              />
            </View>
          )}
        />

        <Text
          style={{
            color: '#fff',
            borderRadius: 50,
            width: 300,
            height: 50,
            textAlign: 'center',
            padding: 15,
            marginTop: 10,
            backgroundColor: '#00b5ec',
            marginBottom: 20,
          }}>
          {'Click to sign in'}
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,

    marginTop: 10,
    marginRight: 1,
  },
});

I have also added updated snack expo please check

https://snack.expo.io/@vishal7008/anxious-candy

Answer 2

As you can see in the code below, what I do is wrapping your text components with a
view, and both views wrapping the text has the exact same size. Once this is done, the Text components inside these views has width and height 100%, so it will be the same size as the view. This way you will have 2 components aligned in your main View with flex-direction = row, and the text will be aligned. Copy the code below and set up the size of the views inside the style props of both views where I commented the code

 <View
                style={{
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'space-between'
                }}
            >
                <View
                    style={{
                        flex: 1,
                        //Here You set up with and height
                    }}
                >
                    <Text
                        style={{
                            height: '100%',
                            width: '100%',
                            textAlign: 'center'
                        }}
                    >
                        {textinputName}
                    </Text>
                </View>

                <View
                    style={{
                        flex: 1,
                        //And here you set up the same with and height than the first view
                    }}
                >
                    <Text
                        style={{
                            height: '100%',
                            width: '100%',
                            textAlign: 'center'
                        }}
                    >
                        {foundTextFields}
                    </Text>
                </View>
            </View>

Answer 3

I recomend you to create Views with the same size. Once this is done, put inside the Text compnent with tha margin you want or the view style properties to align the text.

Either with View Style properties or Text, if the View containing the 2 texts are the same size the texts components wioll be aligned to each other.