В мобильной версии клавиатура закрывает поля ввода input и textarea в формах

Столкнулась со следующей проблемой: в мобильной версии сайта на ReactJS (если конкретно — в Телеграм mini app) при установке курсора на поле input или textarea появляющаяся клавиатура загораживает экран.

Пробовала для решения проблемы прикрутить onFocus на поле ввода (textarea) вот таким вот образом:

const handleAppearanceKeyboard = (ref) => {
    setIsInputFocused(true)
    setTimeout(() => {
        if(ref.current) {
            ref.current.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
        }
    }, 150);
};

Где на ref подавала соответственно ref поля ввода (хук useRef()), однако на андроидах это срабатывает через раз, а на айфонах вообще начинает дрыгаться при прокрутке.

Как сделать работающий вариант, чтобы клавиатура была обязательно под полем и не перекрывала его при установке фокуса?

К примеру, как вот здесь?


Ответы (1 шт):

Автор решения: Dmitry

Ничего не изобретать нового и использовать KeyboardAvoidingView компоненту. Реализована она на react-native

Doc KeyboardAvoidingView

Из описания: этот компонент автоматически регулирует свою высоту, положение или нижний отступ в зависимости от высоты клавиатуры, чтобы оставаться видимым при отображении виртуальной клавиатуры.

→ Ссылка