Unable to type in a react native text field - react-native

Question

I m trying to create a basic login page but I'm not able to write anything in text field. Here is a file login.js. How can I solve this? I'm a beginner in react-native.
import React ,{Component} from 'react';
import {View ,Text,ImageBackground,TouchableOpacity,TextInput} from 'react-native';
export default class Login extends Component
{
constructor(props)
{
super(props)
this.state={
username:"",
password:""
}
}
render()
{
return(
<ImageBackground source={require('./background2.png')}
style={{height:'100%', width:'100%'}} >
<View style={{width:'100%',height:'100%',alignSelf:'center'
,justifyContent:'center',alignContent:'center',alignItems:'center'}}>
<TextInput placeholder={"Enter the user Name"}
onChangeText={(value)=>this.setState({username:value})}
style={{height:42,width:'80%',borderBottomWidth:1}}>
</TextInput>
<TextInput placeholder={"Enter the password"}
onChangeText={(value)=>this.setState({password:value})}
style={{height:42,width:'80%',borderBottomWidth:1,marginTop:'5%'}}>
</TextInput>
<View style={{marginTop:'5%',width:'80%'}}>
<TouchableOpacity style={{borderWidth:1,height:42,width:'80%'
,justifyContent:"center",alignItems:'center',borderRadius:40,
backgroundColor:'black',alignSelf:'center',textAlign:'center'}}>
<Text style={{color:'white'}}>Login</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}

Answer 1

You should try to adding value props to TextInput component. Just pass the state value that you changing onChangeText event. Something like <TextInput value={this.state.password} onChangeText={(value) => this.setState({password : value})}/>.

Answer 2

Please check the following snack.
https://snack.expo.io/HMDWDe!eL
It is working!!
Following is the code...
import React, { Component } from 'react';
import {
View,
Text,
ImageBackground,
TouchableOpacity,
TextInput,
} from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
render() {
return (
<ImageBackground
source={require('./background2.jpg')}
style={{ height: '100%', width: '100%' }}>
<View
style={{
width: '100%',
height: '100%',
alignSelf: 'center',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
}}>
<TextInput
placeholder={'Enter the user Name'}
onChangeText={(value) => this.setState({ username: value })}
style={{
height: 42,
width: '80%',
borderBottomWidth: 1,
}}></TextInput>
<TextInput
placeholder={'Enter the password'}
onChangeText={(value) => this.setState({ password: value })}
style={{
height: 42,
width: '80%',
borderBottomWidth: 1,
marginTop: '5%',
}}></TextInput>
<View style={{ marginTop: '5%', width: '80%' }}>
<TouchableOpacity
style={{
borderWidth: 1,
height: 42,
width: '80%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 40,
backgroundColor: 'black',
alignSelf: 'center',
textAlign: 'center',
}}>
<Text style={{ color: 'white' }}>Login</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}