Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dismiss Keyboard in React Native for iOS
import React, { Component } from 'react';
import {
Alert,
Button,
StyleSheet,
Text,
TextInput,
Keyboard,
TouchableWithoutFeedback,
View
} from 'react-native';
class DismissKeyboardExample extends Component {
constructor(props) {
super(props);
this.state = {
emailTextInput: "",
passwordTextInput: ""
};
}
handleEmailTextInput(text) {
let previousState = this.state;
let newState = previousState;
newState.emailTextInput = text;
this.setState(newState);
}
handlePasswordTextInput(text) {
let previousState = this.state;
let newState = previousState;
newState.passwordTextInput = text;
this.setState(newState);
}
handleTestSignupForm() {
let email = this.state.emailTextInput;
let password = this.state.passwordTextInput;
let info = "email entered: " + email + "\n";
info += "password entered: " + password;
alert(info);
let previousState = this.state;
let newState = previousState;
newState.emailTextInput = "";
newState.passwordTextInput = "";
this.setState(newState);
}
render() {
return (
<TouchableWithoutFeedback
accessible={false}
onPress={ () => Keyboard.dismiss() }>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Dismiss Keyboard Example</Text>
<TextInput
placeholder="Email"
onChangeText={ (text) => this.handleEmailTextInput(text) }
value={this.state.emailTextInput} />
<TextInput
placeholder="Password"
onChangeText={ (text) => this.handlePasswordTextInput(text) }
value={this.state.passwordTextInput} />
<Button
title="Sign Up"
onPress={ () => this.handleTestSignupForm() } />
</View>
</TouchableWithoutFeedback>
);
}
}
export default DismissKeyboardExample;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.