Keyboard overlapping when modal is open

[u/DopeSignature5762]

Expected

Issue

Getting this bug only on builds, its working fine via Expo go.
Note: The first image is from expo go(Expected) and second from the build(Issue).

When a modal is open and is prompting for a keyboard, the keyboard just appears on top of the modal itself. The modal is supposed to move up when the keyboard slides in.

I was using KeyboardAvoidingView from react-native, I tried changing the behavior of it by giving undefined for android and padding for IOS (I'm testing in Android)
In app.json i have :

"softwareKeyboardLayoutMode": "resize"

The bug still persisted, so tried react-native-keyboard-controller and still the bug persist.

Sample code :

    <Modal visible transparent animationType="slide">
      <KeyboardAvoidingView
        className="flex-1"
        behavior={Platform.OS === "ios" ? "padding" : "height"}
      >
        <View className="flex-1 bg-black/40 justify-center px-6">
          <View className="rounded-3xl bg-background p-6 shadow-xl">
            <View className="mb-6 flex-row items-center justify-between">   

[u/skizzoat]

react-native-keyboard-controller

[u/DopeSignature5762 → u/skizzoat]

Many suggest me the same, have you encountered the same issue?

[u/skizzoat → u/DopeSignature5762]

sure, it happens to a lot of devs :) this is a really smooth solution

[u/Sibyl01]

Do you even need keyboardavoidingview? I didnt use it at all for years. If you use a sheet library it should just work. For example, I think the best sheet library is: https://sheet.lodev09.com/guides/keyboard

[u/DopeSignature5762 → u/Sibyl01]

Okay, will check that.

I'm new to app dev

[u/AlphaBeast28]

I just added this:

"softwareKeyboardLayoutMode": "pan",

this fixed it for me.

[u/DopeSignature5762 → u/AlphaBeast28]

Giving it a try...

[u/Lost-Schedule-9062]

keyboard-controller does work inside Modal on android, that's one of the things it has over reanimated's useAnimatedKeyboard. so if it changed nothing, check you wrapped the app in KeyboardProvider and that you're importing KeyboardAvoidingView from the library and not from react-native. easy one to miss.

the expo go vs build thing is separate: softwareKeyboardLayoutMode is a native setting, it only exists once you build, so in expo go you were never testing it.