In this article, We are going to see how to create a TextInput in react-native. For this, we are going to use the TextInput component. It is a basic component that is used to collect data from users.
For creating a TextInput in react native we have to import the TextInput component from React Native.
import { TextInput } from 'react-native'Syntax:
<TextInput // Define TextInput property />
Props for TextInput Component:
- allowFontScaling: This property will specify if the fonts will scale to respect Text Size accessibility settings. The default value for this is true.
- autoCapitalize: This property is used to automatically capitalize the letters. We can pass none, sentences, words, Characters as a parameter for it. By Default, It capitalizes the first letter of each sentence.
- autoCompleteType: This property will provide autofill for the input by giving suggestions. Some values that autoCompleteType support are: off, password, username, postal-code, ’email’, street-address, cc-number, cc-exp-month, name, etc. By default, autoCompleteType is true in all android devices. To disable autocomplete, we need to make it false.
- autoCorrect: This property takes a boolean value. It corrects the input field automatically but if it is false, it will not correct it. The default value is true.
- autoFocus: If it is true, It will focus the input on componentDidMount. In the default case, it will be false,
- blurOnSubmit: It is used to blur the input field on submission. For single-line fields, the default value is true but for multiline fields it is false.
- caretHidden: In default case, it is false. But if it is true, the caret will be hidden.
- clearButtonMode: It is used when we want the clear button to appear on the right side of the text view. This is for only the single-line TextInput components. The default value is never.
- clearTextOnFocus: This property is used when we want to clear the text field automatically when the editing begins.
- contextMenuHidden: In default case, it is false. But if it is true, the context menu will be hidden.
- dataDetectorTypes: This property is used to determine the type of data that is converted to clickable URLs in the text input. By default, no data types are detected.
- defaultValue: This property will provide an initial value when the user starts typing. It is useful for use-cases where users do not want to write the entire value.
- disableFullscreenUI: In the default case, it is false. This property allows users to edit the text inside the full-screen text input mode. To disable this feature we need to make it true.
- editable: If we do not want the user to edit the text input then we can make this editable value false. It will not allow users to edit text from the front end. By default, the value is true.
- enablesReturnKeyAutomatically: This property will let the keyboard automatically enable the return key when there is text else the return key will be disabled. The default value of this is false.
- importantForAutofill: This tells which fields to be included in the view structure for autofill purposes. By default, it is auto.
- inlineImageLeft: It is used to render the image on the left.
- inlineImagePadding: This property is used for providing padding between the inline image and the textInput.
- keyboardAppearance: It is used to specify the color of the keyboard. The color can be the default, light, and dark.
- keyboardType: This property is used to determine the type of keyboard that is going to open.
- maxFontSizeMultiplier: When allowFontScaling is enabled, this is used to specify the largest scale a font can reach.
- maxLength: It is used when we do not want to exceed the particular number of characters. So we provide a fixed maximum length to it.
- multiline: This allows to have multiple lines in text input. By default, the value is false.
- numberOfLines: It is used when we want the fixed number of lines in the TextInput.
- onBlur: It is used when the text input is blurred by calling a callback function where we write stuff.
- onChange: Whenever there is any change in the TextInput, this will call a callback function.
- onChangeText: Whenever there is any change in the text of TextInput, this will call a callback function.
- onContentSizeChange: When the text input’s content size changes ,it calls a callback function.
- onEndEditing: When the text input’s ends, it calls a callback function.
- onPressOut: It is a callback function that is called when a key is released.
- onFocus: When the text input is focused, it calls a callback function.
- onKeyPress: It calls a callback function when a key is pressed where we perform the task.
- onLayout: It is a function that is invoked when the layout changes.
- onScroll: It is a function that is invoked on content scroll.
- onSelectionChange: When the text input selection is changed. It calls for a callback function to perform the related task.
- onSubmitEditing: When the text input’s submit button is pressed. It calls a callback function to perform a task related to it.
- placeholder: It provides the strings which will be rendered for the first before entering the text input.
- placeholderTextColor: It provides the text color of the placeholder.
- returnKeyLabel: It sets the return key to the label.
- returnKeyType: It determines the look of the return key. Some values of returnKeyType are ‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ’emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’.
- scrollEnabled: It enables the scrolling of the text view. By default, it is true.
- secureTextEntry: It is used to secure sensitive data like passwords by obscuring the entered text. The default value is false.
- selectTextOnFocus: It is used to select all text will automatically, when we focus the TextInput.
- showSoftInputOnFocus: If this is false, then when we focused the field. It prevents the soft keyboard from showing. The default value for this is true.
- spellCheck: It enables the spell-check style (i.e. red underlines). To disable this we have to make this false. The default value of this is inherited from autoCorrect.
- textAlign: This property is used to align the input text. Values for textAlign are: left, right and center.
- textContentType: It gives the information about the content that users enter.
- passwordRules: It is used when we have certain requirements for the passwords, we give this requirement to OS.
- style: It is the custom style for input text. All the text styles are not supported in this.
- underlineColorAndroid: It gives the color to the underline of TextInput.
- value: It is the value for the text input.
Now let’s start with the implementation:
-
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
-
Step 2: Now create a project by the following command.
expo init myapp
-
Step 3: Now go into your project folder i.e. myapp
cd myapp
Project Structure:
Example: Now let’s implement the TextInput component. Inside that component whenever there is any text change it calls the function handleText that will set the name state to text. This text will be written in the Text component.
App.js
import React, { Component } from 'react';
import {View,Text,TextInput } from 'react-native';
export default class App extends Component {
state={
name:"",
}
handleText=(text)=>{
this.setState({name:text});
}
render() {
return (
<View>
<TextInput
style={{height: 50, borderColor: 'red',
borderWidth: 3,margin:10,
fontSize:35,}}
onChangeText={(text) =>this.handleText(text)}
placeholder="Enter Name"
value={this.state.text}
/>
<Text style={{fontSize:32,color:'green'}}>
Your name is :{this.state.name}
</Text>
</View>
);
}
} |
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
Reference: https://reactnative.dev/docs/textinput
Article Tags :