Работа с клавиатурой

Экранная клавиатура занимает почти половину экрана. Если поле ввода находится внизу, клавиатура его закроет, и пользователь не увидит, что печатает. Кроме того, клавиатуру нужно уметь прятать — на телефоне нет клавиши Esc.

Поле внизу экрана

Перенесите поле новой задачи в низ экрана списка задач — так удобнее держать телефон одной рукой:

// 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="Новая задача"
          style={{ borderWidth: 1, borderColor: '#ccc', margin: 16, padding: 12, borderRadius: 8 }}
        />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

Нажмите на поле: клавиатура выедет снизу, а поле поднимется над ней. KeyboardAvoidingView уменьшает высоту или добавляет отступ, когда клавиатура открыта. Пустой View с flex: 1 здесь заменяет будущий список задач.

Если над экраном есть шапка стека, на iOS добавьте keyboardVerticalOffset с её высотой, иначе поле поднимется недостаточно.

Спрятать клавиатуру

Keyboard.dismiss() закрывает клавиатуру. Вызовите его после добавления задачи:

// 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();
}

После нажатия «Добавить» задача появится в списке, а клавиатура уедет вниз.

Клавиатура и список

Два пропса FlatList и ScrollView делают работу со списком привычной:

// 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" прячет клавиатуру, как только пользователь начинает прокручивать список. keyboardShouldPersistTaps="handled" позволяет нажать на задачу при открытой клавиатуре с первого раза.

Более сложные формы

Для длинных форм со многими полями сообщество использует библиотеку react-native-keyboard-controller: она плавно анимирует сдвиг и одинаково ведёт себя на iOS и Android. Для одного-двух полей хватает KeyboardAvoidingView.

Частая ошибка

Не задать keyboardShouldPersistTaps. По умолчанию первое нажатие на элемент списка при открытой клавиатуре только закрывает её, и кнопка не срабатывает — пользователю кажется, что приложение не реагирует. Добавляйте keyboardShouldPersistTaps="handled" спискам и прокручиваемым экранам с полями ввода.