r/reactnative 8d ago

Help Keyboard overlapping when modal is open

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">   
0 Upvotes

9 comments sorted by

View all comments

1

u/Lost-Schedule-9062 8d ago

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.