Как обработать появление клавиатуры и изменить layout?

Появление программной клавиатуры на мобильном устройстве — это событие, которое существенно меняет доступное пространство для отображения контента. Обработка этого события необходима, чтобы элементы интерфейса (например, поля ввода или кнопки) не были перекрыты клавиатурой, обеспечивая удобство пользователя.

Механизм работы

В веб-среде браузеры генерируют события resize и visualViewport при появлении/скрытии клавиатуры. Высота клавиатуры варьируется в зависимости от устройства и ориентации экрана. В нативных мобильных приложениях (React Native, iOS, Android) для этого существуют специальные API и события.

Практическая реализация (Веб-пример)

Вот пример на JavaScript для веб-приложения, который отслеживает изменение высоты визуального вьюпорта и корректирует отступ у основного контейнера:

// Проверяем поддержку visualViewport API
if (window.visualViewport) {
  const viewport = window.visualViewport;
  const mainContainer = document.getElementById('root-container');

  viewport.addEventListener('resize', function(event) {
    // Вычисляем, насколько уменьшилась высота области просмотра
    const keyboardHeight = window.innerHeight - viewport.height;
    // Устанавливаем отступ снизу, равный высоте клавиатуры
    mainContainer.style.paddingBottom = keyboardHeight + 'px';
  });

  viewport.addEventListener('scroll', function(event) {
    // Дополнительно можно прокручивать поле ввода в видимую область
    const activeElement = document.activeElement;
    if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
      activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
}

Применение в React Native

В экосистеме React Native задача решается проще с помощью встроенных компонентов:

• KeyboardAvoidingView: Обёртка, которая автоматически поднимает контент при появлении клавиатуры. Нужно выбрать подходящее поведение (padding, height, position).
• Keyboard и события: Можно вручную подписываться на события Keyboard.addListener('keyboardDidShow', ...) для более тонкого контроля, например, для анимаций.

Вывод: Динамическая корректировка макета при появлении клавиатуры — обязательная практика для создания качественных мобильных и адаптивных веб-приложений, напрямую влияющая на пользовательский опыт (UX). Используйте встроенные компоненты фреймворков, где это возможно, и API визуального вьюпорта для веб-решений.