TextInput full view in row direction - react-native

Question

I ma new to React native development. In my application I have login screen. In laogin screen I have two text inputs along with images. I have taken image and Text input in one view and given flex direction as row. And I have given text input as alignSelf stretch. So here my issue is I need full length of text input along with image. But if I removed flex direction then will get full length of the screen. The following is the code
import React, {Component} from 'react';
import {StyleSheet, Text, View,TextInput,TouchableOpacity,StatusBar,Image} from 'react-native';
export default class App extends Component {
static navigationOptions = {
title: "Welcome",
header: null,
}
render() {
// const { navigate } = this.props.navigation
return (
<View style={styles.container}>
<StatusBar
barStyle="light-content"
backgroundColor="#2f5597"
/>
<Image source={require('../../app/images/ic_accountlist.png')} style={styles.logo}/>
<View style={styles.loginView}>
<View >
<Image source={require('../../app/images/ic_userid.png')} />
<TextInput placeholder="Acct No/User Id" style={styles.textInput} underlineColorAndroid={'rgb(0,0,0)'}></TextInput>
</View>
<View style={styles.user}>
<Image source={require('../../app/images/ic_password.png')} />
<TextInput placeholder="Password" style={styles.textInput} underlineColorAndroid={'rgb(0,0,0)'}></TextInput>
</View>
</View>
<TouchableOpacity style={styles.btnLogin} onPress={this.login}><Text style={{color: 'white'}}>Log In</Text></TouchableOpacity>
</View>
);
}
login=()=>{
// alert("testing......");
this.props.navigation.navigate('Profile');
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCF0',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color:'#FF0000',
},
textInput: {
alignSelf: 'stretch',
padding: 10,
marginLeft: 5,
marginRight:0,
},
btnLogin:{
borderRadius: 10,
backgroundColor: '#2f5597',
padding: 10,
marginTop: 20,
paddingLeft: 50,
paddingRight: 50,
alignSelf: 'center',
},
user:{
flexDirection: 'row',
},
logo :{
marginTop: 100,
alignSelf: 'center',
},
loginView:{
marginTop: 60,
}
});
And the following is the output I am getting
And here I need the text input full along with image. Like the below

Answer 1

There is no need to use the alignSelf property. Instead, you have to use flex: 1:
textInput: {
flex: 1,
padding: 10,
marginLeft: 5,
marginRight: 0,
},
flex: 1 is a shorthand notation, so you could also use explicitly flexGrow: 1 to achieve the same effect:
textInput: {
flexGrow: 1,
padding: 10,
marginLeft: 5,
marginRight: 0,
},
You can read more about flex on MDN.
Result (ignore the different icon):

Answer 2

You need to add flex: 1 to textInput style
textInput: {
alignSelf: 'stretch',
padding: 10,
marginLeft: 5,
marginRight:0,
flex: 1
}