react native KeyboardAvoidingView with already opened keyboard dont work properly

Question

In my App there are multiple situations where dialogs are shown. When a user should enter a Mail address and the format is wrong a react-native-paper Dialog will be opened inside a Portal.

<Portal>
  <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
     <SafeAreaView style={{flex: 1}}>
        <Dialog>
         [...]

When the Dialog appeared and afterwards the keyboard opens, everything moves up and it works fine! When the keyboard already is open and the Dialog appears, the dialog opens up behind the keyboard. Any Ideas how to fix?

I uploaded a video to show the behavior: https://streamable.com/zwin42

Already tried position and height as behavior as well, but it didnt work as well.

This only happens on ios! Android works fine!

You could call blur on TextInput after submit. That would hide the keyboard. — Michael Bahl, Sep 17 '21 at 12:30
@MichaelBahl Thank you for your advice. I already tried `Keyboard.dismiss()` in onPress event of the button, but that does not feel great. Its more a work around than a solution. — Yannick Schröder, Sep 17 '21 at 12:37
@Rohit It should open. I tried with different Devices and it works. May you check with another browser/device? — Yannick Schröder, Sep 17 '21 at 14:45
I wouldn't call it a workaround. The keyboard closing for a dialog is fairly normal — Brandon Dyer, Sep 18 '21 at 03:04
@BrandonDyer Thanks for answer. Problem is that I also track the internet connectivity by adding eventlistener to NetInfo `NetInfo.addEventListener`. So when the users keyboard is open and he loses internet connection a dialog will open behind the keyboard... — Yannick Schröder, Sep 20 '21 at 11:15
@YannickSchröder in that case, you could have it close they keyboard when the error is shown — Brandon Dyer, Sep 20 '21 at 16:30

Artem Diashkin · Answer 1 · 2023-06-29T12:47:55.137

UPDATE: Try to use this lib instead: https://github.com/kirillzyusko/react-native-keyboard-controller It solved a lot of our problems.

This is what worked for us

We need to create a hook that will tell us that keyboard will hide (we will need it later):

import { useEffect, useState } from 'react';
import { Keyboard } from 'react-native';

export const useKeyboardVisible = () => {
    const [isKeyboardWillHide, setKeyboardWillHide] = useState(false);

    useEffect(() => {
        const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
            setKeyboardWillHide(true);
        });

        return () => {
            keyboardWillHideListener.remove();
        };
    }, []);

    return { isKeyboardWillHide };
};

Next we will need to create a hook that will return us animated marginBottom styles (for smooth layout change):

establish that keyboard is already visible using Keyboard.isVisible();;
get keyboard height using Keyboard.metrics();
if keyboard is visible -> set marginBottom = keyboard height

import { Keyboard } from 'react-native';
import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

const useKeyboardAlreadyVisibleMarginFix = () => {
    const { isKeyboardWillHide } = useKeyboardVisible();

    const marginBottom = useSharedValue(0);

    const animatedStyle = useAnimatedStyle(() => {
        return {
            marginBottom: marginBottom.value
                ? marginBottom.value
                : withTiming(0, {
                      duration: 300,
                  }),
        };
    }, []);

    useEffect(() => {
        const isVisible = Keyboard.isVisible();
        const metrics = Keyboard.metrics();

        if (isVisible) {
            marginBottom.value = metrics?.height ?? 0;
        }

        if (isKeyboardWillHide) {
            marginBottom.value = 0;
        }

        return () => {
            marginBottom.value = 0;
        };
    }, [isKeyboardWillHide, marginBottom]);

    return { animatedStyle };
};

Use `Animated.View for making layout animation more user-friendly:

import { Keyboard, KeyboardAvoidingView, Platform } from 'react-native';
import { useHeaderHeight } from '@react-navigation/elements';
import Animated from 'react-native-reanimated';

// ...
 const height = useHeaderHeight();

 const { animatedStyle } = useKeyboardAlreadyVisibleMarginFix();

if (Platform.OS === 'ios') {
   return (
      <KeyboardAvoidingView behavior="padding" style={{flex: 1}} keyboardVerticalOffset={height}>
         <Animated.View style={[{ flex: 1 }, animatedStyle]}>{children}</Animated.View>
      </KeyboardAvoidingView>
   );
}

react native KeyboardAvoidingView with already opened keyboard dont work properly

1 Answers1

Linked