Handling the keyboard

The on-screen keyboard takes up almost half of the screen. If an input field is at the bottom, the keyboard covers it, and the user cannot see what they type. You also need a way to hide the keyboard, since a phone has no Esc key.

A field at the bottom of the screen

Move the new task field to the bottom of the to-do screen, which is easier to reach with one hand:

// app/index.tsx
import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
 
export default function Index() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <View style={{ flex: 1 }} />
        <TextInput
          placeholder="New task"
          style={{ borderWidth: 1, borderColor: '#ccc', margin: 16, padding: 12, borderRadius: 8 }}
        />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

Tap the field: the keyboard slides up from the bottom, and the field rises above it. KeyboardAvoidingView reduces its height or adds padding while the keyboard is open. The empty View with flex: 1 stands in for the future task list.

If there is a stack header above the screen, add keyboardVerticalOffset with its height on iOS, otherwise the field does not rise far enough.

Hiding the keyboard

Keyboard.dismiss() closes the keyboard. Call it after adding a task:

// app/index.tsx
import { Keyboard } from 'react-native';
 
function addTask() {
  if (title.trim() === '') return;
  setTasks([...tasks, { id: Date.now().toString(), title: title.trim(), done: false }]);
  setTitle('');
  Keyboard.dismiss();
}

After you press "Add", the task appears in the list and the keyboard slides down.

The keyboard and a list

Two props of FlatList and ScrollView make lists behave as users expect:

// app/index.tsx
<FlatList
  data={tasks}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <TaskItem task={item} onToggle={toggleTask} />}
  keyboardDismissMode="on-drag"
  keyboardShouldPersistTaps="handled"
/>

keyboardDismissMode="on-drag" hides the keyboard as soon as the user starts scrolling the list. keyboardShouldPersistTaps="handled" lets the user tap a task on the first try while the keyboard is open.

More complex forms

For long forms with many fields, the community uses the react-native-keyboard-controller library: it animates the shift smoothly and behaves the same on iOS and Android. For one or two fields, KeyboardAvoidingView is enough.

Common mistake

Not setting keyboardShouldPersistTaps. By default, the first tap on a list item while the keyboard is open only closes the keyboard, and the button does not fire, so the user thinks the app is not responding. Add keyboardShouldPersistTaps="handled" to lists and scrolling screens with input fields.