Scribd
Upload
66 views

React Native Text Input

TextInput is a fundamental React Native component for inputting text. It has various props like onChangeText and onSubmitEditing that call functions when the text changes or is submitted. TextInput can be used to validate text as a user types. For example, one example replaces spaces in input text with emoji pizza slices. Multiline TextInput allows multiple lines of input using the multiline prop.

Uploaded by

Aizel Almonte
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views

React Native Text Input

TextInput is a fundamental React Native component for inputting text. It has various props like onChangeText and onSubmitEditing that call functions when the text changes or is submitted. TextInput can be used to validate text as a user types. For example, one example replaces spaces in input text with emoji pizza slices. Multiline TextInput allows multiple lines of input using the multiline prop.

Uploaded by

Aizel Almonte
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

React Native Text Input

TextInput is the fundamental component to input text. It has several props which
configure the different features, such as onChangeText that takes a function and call it
whenever the text changed. The onSubmitEditing prop takes a function, which is called
when the text submitted.

There are several things, which can be performed with text input, such as validating the
text inside while user types.

React Native TextInput Example 1


In this example, we create a TextInput and perform an onChangeText action. At every
text change, it calls the setState and checks the condition of a split. If the input text
found ' ' space, it displays '🍕' in the text. The text is placed in state as it is changed every
time.

import React, { Component } from 'react';


import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {


constructor(props) {
super(props);
this.state = {text: ''};
}

render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40,backgroundColor: 'azure', fontSize: 20}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 100, fontSize: 50}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>*
</View>
);
}
}
Output

TextInput properties
allowFontScaling autoCapitalize autoCorrect

blurOnSubmit caretHidden clearButtonMode

contextMenuHidden dataDetectorTypes defaultValue

editable enablesReturnKeyAutomatically inlineImageLeft

keyboardAppearance keyboardType maxLength


numberOfLines onBlur onChange

onContentSizeChange onEndEditing onFocus

onLayout onScroll onSelectionChange

placeholder placeholderTextColor returnKeyLabel

scrollEnabled secureTextEntry selection

selectionColor selectionState selectTextOnFocus

textContentType style textBreakStrategy

The method .focus() and .blur() are exposed from the native element. These methods
focus or blur the TextInput programmatically.

Multiline TextInput
The multiline props provide facility to input multiple lines of text. Some props
of TextInput are only compatible with multiline, for example, multiline={true/false}.
The property borderButtomColor will not work if multiline = false.

React Native TextInput Example 2


import React, { Component } from 'react';
import { AppRegistry, View, TextInput } from 'react-native';

class UselessTextInput extends Component {


render() {
return (
<TextInput
{...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
editable = {true}
maxLength = {40}
/>
);
}
}
export default class UselessTextInputMultiline extends Component {
constructor(props) {
super(props);
this.state = {
text: 'Useless Multiline Placeholder',
};
}

render() {
return (
<View style={{
backgroundColor: this.state.text,
borderBottomColor: '#000000',
borderBottomWidth: 1,
}}
>
<UselessTextInput
multiline = {true}
numberOfLines = {10}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
style={{fontSize: 20}}
/>
</View>
);
}
}

Output
 

You might also like