A foundational component for inputting text into the app via a
keyboard. Props provide configurability for several features, such as auto-
correction, auto-capitalization, placeholder text, and different keyboard
types, such as a numeric keypad.
The simplest use case is to plop down a TextInput and subscribe to the
onChangeText events to read the user input. There are also other events, such
as onSubmitEditing and onFocus that can be subscribed to. A simple
example:
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({input: text})}
/>
<Text>{'user input: ' + this.state.input}</Text>
</View>
The value prop can be used to set the value of the input in order to make
the state of the component clear, but <TextInput> does not behave as a true
controlled component by default because all operations are asynchronous.
Setting value once is like setting the default value, but you can change it
continuously based on onChangeText events as well. If you really want to
force the component to always revert to the value you are setting, you can
set controlled={true}.
The multiline prop is not supported in all releases, and some props are
multiline only.
autoCapitalize enum('none', 'sentences', 'words', 'characters') #
Can tell TextInput to automatically capitalize certain characters.
- characters: all characters,
- words: first letter of each word
- sentences: first letter of each sentence (default)
- none: don't auto capitalize anything
autoCorrect bool #
If false, disables auto-correct. Default value is true.
autoFocus bool #
If true, focuses the input on componentDidMount. Default value is false.
bufferDelay number #
This helps avoid drops characters due to race conditions between JS and
the native text input. The default should be fine, but if you're
potentially doing very slow operations on every keystroke then you may
want to try increasing this.
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') #
When the clear button should appear on the right side of the text view
controlled bool #
If you really want this to behave as a controlled component, you can set
this true, but you will probably see flickering, dropped keystrokes,
and/or laggy typing, depending on how you process onChange events.
editable bool #
If false, text is not editable. Default value is true.
enablesReturnKeyAutomatically bool #
If true, the keyboard disables the return key when there is no text and
automatically enables it when there is text. Default value is false.
keyboardType enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric") #
Determines which keyboard to open, e.g.numeric.
multiline bool #
If true, the text input can be multiple lines. Default value is false.
onBlur function #
Callback that is called when the text input is blurred
onChange function #
Callback that is called when the text input's text changes.
onFocus function #
Callback that is called when the text input is focused
onSubmitEditing function #
password bool #
If true, the TextInput will be a password field. Default value is false.
placeholder string #
The string that will be rendered before text input has been entered
placeholderTextColor string #
The text color of the placeholder string
returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') #
Determines how the return key should look.
secureTextEntry bool #
If true, the text input obscures the text entered so that sensitive text
like passwords stay secure. Default value is false.
selectionState DocumentSelectionState #
See DocumentSelectionState.js, some state that is responsible for
maintaining selection information for a document
testID string #
Used to locate this view in end-to-end tests.
value string #
The default value for the text input
'use strict';
var React = require('react-native');
var {
Text,
TextInput,
View,
StyleSheet,
} = React;
var WithLabel = React.createClass({
render: function() {
return (
<View style={styles.labelContainer}>
<View style={styles.label}>
<Text>{this.props.label}</Text>
</View>
{this.props.children}
</View>
);
}
});
var TextEventsExample = React.createClass({
getInitialState: function() {
return {
curText: '<No Event>',
prevText: '<No Event>',
};
},
updateText: function(text) {
this.setState({
curText: text,
prevText: this.state.curText,
});
},
render: function() {
return (
<View>
<TextInput
autoCapitalize="none"
placeholder="Enter text to see events"
autoCorrect={false}
onFocus={() => this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText(
'onChange text: ' + event.nativeEvent.text
)}
onEndEditing={(event) => this.updateText(
'onEndEditing text: ' + event.nativeEvent.text
)}
onSubmitEditing={(event) => this.updateText(
'onSubmitEditing text: ' + event.nativeEvent.text
)}
style={styles.default}
/>
<Text style={styles.eventLabel}>
{this.state.curText}{'\n'}
(prev: {this.state.prevText})
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
page: {
paddingBottom: 300,
},
default: {
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
flex: 1,
fontSize: 13,
},
multiline: {
borderWidth: 0.5,
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
height: 50,
},
eventLabel: {
margin: 3,
fontSize: 12,
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
flex: 1,
},
label: {
width: 80,
justifyContent: 'flex-end',
flexDirection: 'row',
marginRight: 10,
paddingTop: 2,
},
});
exports.title = '<TextInput>';
exports.description = 'Single-line text inputs.';
exports.examples = [
{
title: 'Auto-focus',
render: function() {
return <TextInput autoFocus={true} style={styles.default} />;
}
},
{
title: 'Auto-capitalize',
render: function() {
return (
<View>
<WithLabel label="none">
<TextInput
autoCapitalize="none"
style={styles.default}
/>
</WithLabel>
<WithLabel label="sentences">
<TextInput
autoCapitalize="sentences"
style={styles.default}
/>
</WithLabel>
<WithLabel label="words">
<TextInput
autoCapitalize="words"
style={styles.default}
/>
</WithLabel>
<WithLabel label="characters">
<TextInput
autoCapitalize="characters"
style={styles.default}
/>
</WithLabel>
</View>
);
}
},
{
title: 'Auto-correct',
render: function() {
return (
<View>
<WithLabel label="true">
<TextInput autoCorrect={true} style={styles.default} />
</WithLabel>
<WithLabel label="false">
<TextInput autoCorrect={false} style={styles.default} />
</WithLabel>
</View>
);
}
},
{
title: 'Keyboard types',
render: function() {
var keyboardTypes = [
'default',
'ascii-capable',
'numbers-and-punctuation',
'url',
'number-pad',
'phone-pad',
'name-phone-pad',
'email-address',
'decimal-pad',
'twitter',
'web-search',
'numeric',
];
var examples = keyboardTypes.map((type) => {
return (
<WithLabel key={type} label={type}>
<TextInput
keyboardType={type}
style={styles.default}
/>
</WithLabel>
);
});
return <View>{examples}</View>;
}
},
{
title: 'Return key types',
render: function() {
var returnKeyTypes = [
'default',
'go',
'google',
'join',
'next',
'route',
'search',
'send',
'yahoo',
'done',
'emergency-call',
];
var examples = returnKeyTypes.map((type) => {
return (
<WithLabel key={type} label={type}>
<TextInput
returnKeyType={type}
style={styles.default}
/>
</WithLabel>
);
});
return <View>{examples}</View>;
}
},
{
title: 'Enable return key automatically',
render: function() {
return (
<View>
<WithLabel label="true">
<TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
</WithLabel>
</View>
);
}
},
{
title: 'Secure text entry',
render: function() {
return (
<View>
<WithLabel label="true">
<TextInput secureTextEntry={true} style={styles.default} value="abc" />
</WithLabel>
</View>
);
}
},
{
title: 'Event handling',
render: function(): ReactElement { return <TextEventsExample /> },
},
{
title: 'Colored input text',
render: function() {
return (
<View>
<TextInput
style={[styles.default, {color: 'blue'}]}
value="Blue"
/>
<TextInput
style={[styles.default, {color: 'green'}]}
value="Green"
/>
</View>
);
}
},
{
title: 'Clear button mode',
render: function () {
return (
<View>
<WithLabel label="never">
<TextInput
style={styles.default}
clearButtonMode="never"
/>
</WithLabel>
<WithLabel label="while editing">
<TextInput
style={styles.default}
clearButtonMode="while-editing"
/>
</WithLabel>
<WithLabel label="unless editing">
<TextInput
style={styles.default}
clearButtonMode="unless-editing"
/>
</WithLabel>
<WithLabel label="always">
<TextInput
style={styles.default}
clearButtonMode="always"
/>
</WithLabel>
</View>
);
}
},
];
React Native