Autofill section overlaps with KeyboardAvoidingView

Viewed 189

I've been recently struggling with a keyboard issue on android.

The KeyboardAvoidingView component is working as expected on both platforms (iOS and Android) BUT there is one scenario where the autofill section (on top of the keyboard) overlaps with the content.

Here is a demo:

There is no problem if the input already has a value, but if the value is empty, the autofill section will pop up and overlaps with the floating button.

demo

Does anyone know how to solve this issue? Either make the KeyboardAvoidingView aware of that extra space for the autofill or listen to events in order to make adjustments to my layout (add some padding at the bottom for example).

More info:

I'm already subscribed to keyboardDidShow/keyboardDidHide events for the image animation.

After trial and error, behavior: Platform.select({ ios: 'padding', android: null }) worked for me (with the exception of the autofill issue).

The layout looks like this:

  return (
    <KeyboardAvoidingView>
      <ViewLayout>
        {/* Content here */}
      </ViewLayout>
      <Button />
    </KeyboardAvoidingView>
  );

And here is an Expo Snack with the code example (select Android platform):

https://snack.expo.io/@nico-amabile/autofill-and-keyboardavoidingview

0 Answers
Related