TextInput

TextInput

TextInput: Controlled Values and Events

TextInput is the editable field; on Android it is a real EditText, with the platform's cursor, selection handles, autofill and soft keyboard. Like a React 7,897 DOM input it can be uncontrolled (defaultValue) or controlled (value plus onChangeText), and a controlled one can transform what the user types. This search box drops leading spaces and filters the catalog on every keystroke:

src/demos/SearchBox.tsx: a controlled input with a submit event (excerpt)TSX

  const [query, setQuery] = useState('');
  const hits = books.filter((b) => b.title.toLowerCase().includes(query.toLowerCase()));
  return (
    <Screen>
      <TextInput style={ui.input} value={query} onChangeText={(t) => setQuery(t.trimStart())}
        onSubmitEditing={(e) => console.log('submit:', e.nativeEvent.text)}
        placeholder="Search titles" inputMode="search" autoCorrect={false} />
      <Text style={ui.label}>{hits.length} of {books.length} books</Text>
      {hits.map((b) => <Text key={b.id} style={ui.card}>{b.title}</Text>)}
    </Screen>

Typing "the" left three of the six books on screen, and pressing the keyboard's action key logged:

Output of 31

 LOG  submit: The

Gboard committed its highlighted suggestion, "The", as the key was pressed, even with autoCorrect={false}; the lowercase comparison makes the filter immune. onChange passes an event with text and an eventCount, onFocus and onBlur bracket editing, and onEndEditing is the reliable place to read the final text. On Android, onKeyPress reports only the soft keyboard. The web-standard inputMode ('search', 'email', 'numeric', 'decimal', 'tel', 'url') takes precedence over keyboardType, as enterKeyHint does over returnKeyType.

MENU