How to align texts to each Textinput - React Native - 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

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.

Answer 3

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>