TextInput onChangeText not working React Native

Question

i am very new to this platform , it my 2nd day on this. i trying to learn it by myself by creating simple login , sign up , news feed application . i am able to build login page but while getting values from InputText , it display me error saying "Can not specify both value and Children" , Here i am posting my login.js class

export default class LoginScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
    }
    login = () => {
        alert(this.state.username + " " + this.state.password);
    }
    render() {
        return (
            <View style={styles.container}>

                <Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
                    <View style={styles.content}>
                        <Image source={require('../images/logo.png')} style={styles.logo}>
                        </Image>

                        <View style={styles.inputcontainer}>

                            <TextInput underLineColorAndroid='transparent' style={styles.input} value={this.state.username} onChangeText={(username) => this.setState({ username })} placeholderText='username' > </TextInput>

                            <TextInput secureTextEntry={true} underLineColorAndroid='transparent' style={styles.input} value={this.state.password} onChangeText={(password) => this.setState({ password })} placeholderText='password' placeholderTextColor='black'> </TextInput>

                        </View>
                        <TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
                            <Text style={styles.buttonText}>LOGIN</Text>
                        </TouchableOpacity>
                    </View>
                </Image>
            </View>
        );
    }
}

Please let me know where i am going wrong in code

Regards

Answer 1

Can you please try this

export default class LoginScreen extends Component {

constructor(props) {
    super(props);
    this.state = {username: '',password: ''};
}
login = () => {
    alert(this.state.username + " " + this.state.password);
}
render() {
    return (
        <View style={styles.container}>
            <Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
                <View style={styles.content}>
                    <Image source={require('../images/logo.png')} style={styles.logo}>
                    </Image>
                    <View style={styles.inputcontainer}>
                        <TextInput 
                        underLineColorAndroid='transparent' 
                        style={styles.input} 
                        value={this.state.username} 
                        onChangeText={(text) => this.setState({ username: text })} 
                        placeholderText='username'/>

                        <TextInput 
                        secureTextEntry={true} 
                        underLineColorAndroid='transparent' 
                        style={styles.input} 
                        value={this.state.password} 
                        onChangeText={(text) => this.setState({ password:text })} 
                        placeholderText='password' 
                        placeholderTextColor='black'/>
                    </View>
                    <TouchableOpacity onPress={this.login()} style={styles.buttonContainer}>
                        <Text style={styles.buttonText}>LOGIN</Text>
                    </TouchableOpacity>
                </View>
            </Image>
        </View>
    );
}