React Native TextInput

TextInput is basic component of Forms in any application. If you want user to write anything like email or password etc. then you need TextInput.

React Native TextInput

TextInput allows the user to enter text in the app via KeyBoard. So here is how you are gonna add this to the app.

      <TextInput
        style={{height: 40}}
        placeholder="Enter Your Email"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />

Working Example

This have so many props for auto-correction, make text capital etc. at below this example.

Important useful Properties (props)

These are the props of the component TextInput

1. autoCapitalize –

This is used to capitalize characters.

characters	all characters
words	first letter of each word
sentences	first letter of each sentence (default)
none	don’t auto capitalize anything

2. placeholder –

Set string before the placeholder.

3. placeholderTextColor –

used to set color for placeholder.

4. keyboardType –

Opens the keyboard you want to open according

For Android and Ios

• default
• number-pad
• decimal-pad
• numeric
• email-address
• phone-pad

IOS only

• ascii-capable
• numbers-and-punctuation
• url
• name-phone-pad
• web-search

Android only

• visible-password

For more keyboard type and with images go to – https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/

5. autoCompleteType –

It give the textinput ability to autofill. We use it according to our text type.

It’s values are –

• off
• username
• password
• email
• name
• tel
• street-address
• postal-code
• cc-number
• cc-csc
• cc-exp
• cc-exp-month
• cc-exp-year

6. autoCorrect –

default value is true you can make it false. It correct your words in input.

7. defaultValue –

Initial value for the text field. It is editable the user can change it.

8. maxLength –

By this we can put limit on the TextInput.

9. multiline –

If you don’t want to make your text box one line. Then you need to make it multiline. Just make it true for that. If you want to specify the number of lines it have than use the next prop.

10. numberOfLines –

For this the previous multiline must be true. It set the lines limit to Text Field.

11. onChangeText –

When text change in the TextInput then this is called. Every character is passed as argument to the callback function. for example

onChangeText={text => setText(text)}

12. onEndEditing –

Callback that is called when text input ends.

13. onFocus

When text input is focused than this is called.

14. onSelectionChange

Callback that is called when the text input selection is changed. This will be called with { nativeEvent: { selection: { start, end } } }. This prop requires multiline={true} to be set.

15. onSubmitEditing

When we submit the form than this is called.

16. returnKeyType

This specify how your return key should look.

Supports for Android and Ios

• done
• go
• next
• search
• send

Android only

• none
• previous

Ios only

• default
• emergency-call
• google
• join

17. secureTextEntry

It is used for values like password. For securing the text. For usage just make it true.

18. selection

The start and end of the text input’s selection. Set start and end to the same value to position the cursor. For setting the color of selection text just add ‘selectionColor‘ and add your desired color. and for make the selection text focused just add ‘selectTextOnFocus‘ as true and your work is done.

19. textAlign

For align Your text in the field.

• left
• center
• right

20. textContentType

This is one of the most important prop. By this we can give the content type to the textinut, so it can autofill the text field. This is very relaxing for the user that they don’t have to write their information again and again. For example if the OTP is come at the user’s mobile than they don’t have to type the text out textinput take it from the notification. Other types are –

• none
• URL
• addressCity
• addressCityAndState
• addressState
• countryName
• creditCardNumber
• emailAddress
• familyName
• fullStreetAddress
• givenName
• jobTitle
• location
• middleName
• name
• namePrefix
• nameSuffix
• nickname
• organizationName
• postalCode
• streetAddressLine1
• streetAddressLine2
• sublocality
• telephoneNumber
• username
• password
• newPassword
• oneTimeCode

21. value

It shows the text value. If you chance value on run time it can cause some problem. You have to make sure it didn’t do conflict with anything. one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.

Methods

.focus()	Makes the native input request focus.
.blur()	Makes the native input lose focus.
clear()	Removes all text from the TextInput.
isFocused()	Returns true if the input is currently focused; false otherwise.

If you want help with anything you can comment downbelow.