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>
    )
}

Are You want to show Full name to center with Enter your full name??? — Vishal Dhanotiya
– Vishal Dhanotiya, Commented Mar 27, 2019 at 16:26
@VishalDhanotiya yes I want to do exactly that. How can I do it? — showtime
– showtime, Commented Mar 28, 2019 at 10:32
@BMX plese check i have added my answer it will help to solve your problem — Vishal Dhanotiya
– Vishal Dhanotiya, Commented Mar 28, 2019 at 15:00

Vishal Dhanotiya · Accepted Answer · 2019-03-29 11:27:00Z

2

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

edited Mar 29, 2019 at 11:27

answered Mar 28, 2019 at 11:56

Vishal Dhanotiya

2,6481 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

showtime Over a year ago

I am using dynamic textinputs and texts as you can see.

Vishal Dhanotiya Over a year ago

What is mean of dynamic textinput or text ?? Value of text is dynamic or multiple text input create dynamically??

showtime Over a year ago

They are fetched from an api, rendered and displayed as I have posted the code. Basically I am displaying there two arrays, one textinputs and the other with texts

showtime Over a year ago

just use my code, do not change it because it doesnt make sense. And dont use component <Textinput> or <Text> because I am calling an array there so I cant use these components besides <View>

Vishal Dhanotiya Over a year ago

Sorry, @BMX I can't help you anymore because of your code logically incorrect. There is no need to push view into an array. Its increase rendering time

|

Quim Baget · Accepted Answer · 2019-03-27 19:22:40Z

1

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.

answered Mar 27, 2019 at 19:22

Quim Baget

7171 gold badge6 silver badges11 bronze badges

1 Comment

showtime Over a year ago

Can you show an example, I am not sure if i got it!

Quim Baget · Accepted Answer · 2019-03-28 11:53:50Z

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>

but I need textinputs to remain the same width all the time, and have space between each other when text on the left is too long.

Collectives™ on Stack Overflow

How to align texts to each Textinput - React Native

3 Answers 3

15 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related