Text Input
Text Input is a component. It is used to create an editable text field for the user to type in. value,onChangeText,onSubmitEditing these props used to capture user input.value is the current text in the input field. onChangeText is a function called each time when the text changes.The new value is the first argument. onSubmitEditing is a function called when the user press the return/next key to submit/move to the next field. Its common to store the current text in the state of the component that renders the Text Input.Every time we call the function onChangeText, we call setState to update the current text. When the user press return key,we call onSubmitEditing function. then we can perform some action with current text, & use setState to update the text.
When we working with Text Input, we can use most of the same styles as Text. A few common props :
1. autoCorrect : Enable/disable auto-correct.
2. editable : Enable/disable the text field.
3. multiline : Allow multiple lines of input text.
4. placeholder : The text to show when the text field is empty.
5. placeholderTextColor : The color of the placeholder text.
6. autoCapitalize : For capitalizing characters as they’re typed.
7. keyboardType : The type of keyboard to display. Cross-platform values are 'default', 'numeric', 'phone-pad', 'email-address'.
8. returnKeyType : The text of the return key on the keyboard. Cross-platform values are 'done', 'go', 'next', 'send'.
Example:
________________________________________________________
import React from 'react';
import { TextInput, View, StyleSheet, Text } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ''
};
}
render() {
return (
<View style={styles.container}>
<Text style={{color: 'blue'}}>{this.state.username}</Text>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Enter Text'}
style={styles.input}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffffff',
},
input: {
width: 250,
height: 44,
padding: 10,
marginBottom: 10,
backgroundColor: '#ecf0f1'
},
});
_____________________________________________________________________________________
Output:
