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

react native KeyboardAvoidingView with already opened keyboard dont work properly

0 Answers0

Linked