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

Can you please update your code there apply proper formatting so i can read and help you. — Nisarg Thakkar
– Nisarg Thakkar, Commented May 19, 2017 at 7:57

Nisarg Thakkar · Accepted Answer · 2017-05-19 08:13:31Z

2

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

answered May 19, 2017 at 8:13

Nisarg Thakkar

1,54316 silver badges26 bronze badges

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

7 Comments

user2028 Over a year ago

A little help sir , alert is getting displayed every time i write inside input box , But onpress event on TouchableOpacity not firing up the login function may , i know the reason behind it.

Nisarg Thakkar Over a year ago

Sorry i am not getting you can you please give me some more details.

user2028 Over a year ago

I just want to call login function on press on login button which is under TouchableOpacity Tag , right now the login function is getting called every time when ever i write something in username input field or password input filed . And please do let me know that what make onChangeText work , i want to understand. Appreciate it sir!!!

Nisarg Thakkar Over a year ago

onChangeText is Callback function that is called when the text input's text changes.

Nisarg Thakkar Over a year ago

Please replace code with this

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

|

Collectives™ on Stack Overflow

TextInput onChangeText not working React Native

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related