TextInput is the core React Native component for typed text. Keep its value in state and update it from onChangeText, which hands you the new string. For a textarea, set multiline to true and add textAlignVertical: "top" so Android matches iOS. keyboardType, autoComplete and secureTextEntry pick the keyboard, autofill hint and password masking.
| Field | Props |
|---|---|
| keyboardType="email-address" autoComplete="email" autoCapitalize="none" | |
| Password | secureTextEntry autoComplete="password" textContentType="password" |
| Textarea | multiline numberOfLines={4} textAlignVertical="top" |
| Price | keyboardType="decimal-pad" |
| One-time code | keyboardType="number-pad" autoComplete="one-time-code" maxLength={6} |
Updated
The official reference is one long alphabetical list. This page keeps the ones people search for, with their real values and defaults, in a table you can filter by name, value or platform. Type multiline, password or android into the box to narrow it.
| Prop | Values or type | Default | Platform | What it does |
|---|---|---|---|---|
| value / onChangeText | string / (text) => void | Both | Controlled text and the callback that receives each new string | |
| defaultValue | string | Both | Initial text when you do not control the value | |
| placeholder | string | Both | Hint shown while the field is empty | |
| placeholderTextColor | color | Both | Colour of the placeholder text | |
| multiline | bool | false | Both | Allows several lines; the textarea of React Native |
| numberOfLines | number | Both | Maximum lines to show; on iOS only with the New Architecture | |
| keyboardType | default, number-pad, decimal-pad, numeric, email-address, phone-pad, url | Both | Which keyboard opens | |
| keyboardType (iOS) | ascii-capable, numbers-and-punctuation, name-phone-pad, twitter, web-search | iOS | Extra keyboards only iOS offers | |
| keyboardType (Android) | visible-password | Android | A keyboard with no suggestions | |
| inputMode | none, text, decimal, numeric, tel, search, email, url | Both | Like the HTML inputmode attribute; wins over keyboardType | |
| secureTextEntry | bool | false | Both | Masks the text; does not work with multiline |
| autoComplete | email, password, username, new-password, one-time-code, off and more | Both | Autofill hint for the system; off disables it | |
| textContentType | password, newPassword, oneTimeCode, emailAddress, username, none and more | iOS | Tells iOS what the field holds for keychain and code autofill | |
| passwordRules | string | iOS | Requirements for generated passwords when textContentType is newPassword | |
| autoCapitalize | characters, words, sentences, none | sentences | Both | Which letters become capitals automatically |
| autoCorrect | bool | true | Both | Turns auto-correct on or off |
| maxLength | number | Both | Stops input at this many characters | |
| editable | bool | true | Both | false makes the field read only |
| readOnly | bool | false | Both | true makes the field read only; an alternative to editable |
| returnKeyType | done, go, next, search, send | Both | Label of the Return key; more values exist per platform | |
| onSubmitEditing | ({nativeEvent}) => void | Both | Runs when the submit key is pressed; not called for phone-pad on iOS | |
| submitBehavior | submit, blurAndSubmit, newline | blurAndSubmit (single line), newline (multiline) | Both | What Return does; replaces blurOnSubmit |
| blurOnSubmit | bool | Both | Deprecated in favour of submitBehavior | |
| underlineColorAndroid | color | Android | Colour of the default bottom border; transparent hides it |
textAlignVertical keeps the cursor at the top on Android, and the character count reads straight from state.
import { useState } from "react";
import { Text, TextInput, View } from "react-native";
export function Notes() {
const [text, setText] = useState("");
return (
<View>
<Text>Notes</Text>
<TextInput
accessibilityLabel="Notes"
value={text}
onChangeText={setText}
multiline
numberOfLines={4}
maxLength={500}
style={{ minHeight: 100, textAlignVertical: "top", borderWidth: 1, borderRadius: 8, padding: 10 }}
/>
<Text>{text.length}/500</Text>
</View>
);
}returnKeyType="next" labels the key, and onSubmitEditing focuses the password field through its ref.
import { useRef, useState } from "react";
import { TextInput } from "react-native";
export function LoginFields() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const passwordRef = useRef(null);
return (
<>
<TextInput
value={email}
onChangeText={setEmail}
placeholder="Email"
keyboardType="email-address"
autoComplete="email"
autoCapitalize="none"
returnKeyType="next"
submitBehavior="submit"
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
ref={passwordRef}
value={password}
onChangeText={setPassword}
placeholder="Password"
secureTextEntry
autoComplete="password"
textContentType="password"
returnKeyType="done"
/>
</>
);
}Most screens pass value and onChangeText, so state always holds what is on screen and you can validate or reformat it. defaultValue gives an initial string without tracking each keystroke, which suits a field you read only once, on submit.
Reach for a ref when you need to move focus. Calling focus() on the next field's ref inside onSubmitEditing gives you the familiar tap Return to move down a form behaviour.
keyboardType changes the keys a person sees; it never validates what they type. A decimal-pad field can still receive pasted letters, so check the string before you save it.
autoComplete is the cross-platform hint for the system's autofill, and textContentType is the iOS-only one. Setting both on login fields lets saved passwords and one-time codes from messages fill in on either platform.
There is no separate textarea component. Use TextInput with multiline set to true, give it a height or numberOfLines, and add textAlignVertical: "top" so the first line starts at the top on Android as it does on iOS.
On a multiline field submitBehavior defaults to "newline". Set it to "submit" or "blurAndSubmit" if Return should fire onSubmitEditing instead. Single-line fields default to "blurAndSubmit".
submitBehavior. The docs mark blurOnSubmit as deprecated, and submitBehavior overrides it when both are present.
default, number-pad, decimal-pad, numeric, email-address, phone-pad and url. Others, such as twitter and web-search on iOS or visible-password on Android, only apply to one platform.
Related: React Native forms and validation, React Native password input, HTML input type number, React vs React Native, React with TypeScript.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.