В мобильной версии клавиатура закрывает поля ввода 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 шт):
Ничего не изобретать нового и использовать KeyboardAvoidingView
компоненту. Реализована она на react-native
Из описания: этот компонент автоматически регулирует свою высоту, положение или нижний отступ в зависимости от высоты клавиатуры, чтобы оставаться видимым при отображении виртуальной клавиатуры.