[Android] Tab bar sticks to keyboard instead of being hidden behind it

[rosskhanas]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

The tab bar sticks to keyboard on Android on Chat layout. It happens even on example project in this repo:

The problem is that textinput is also hidden behind tab bar.

Library version

0.9.1

Environment info

System:
  OS: macOS 15.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 140.16 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/rosskhanas/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 3.1.6
    path: /Users/rosskhanas/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native:
    installed: 0.77.1
    wanted: ^0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: true
iOS:
  hermesEnabled: false
  newArchEnabled: false

Steps to reproduce

1. Run example project on Android, I use Pixel 9 emulator
2. Click on a "Four Tabs" button
3. Open Chats
4. Focus text input

Reproducible sample code

https://github.com/callstackincubator/react-native-bottom-tabs/blob/main/apps/example/src/Screens/Chat.tsx

[okwasniewski]

Hey,

To make the tabs stay behind the keyboard you need to set windowSoftInputMode="adjustPan" in Android manifest. This can be also achieved in expo: https://stackoverflow.com/questions/67316681/how-to-add-properties-in-androidmanifest-in-react-native-app-built-with-expo

[rosskhanas]

@okwasniewski thank you for the quick reply!

I'm trying this in my project, using expo 53, new architecture, and edge-to-edge enabled. No luck 😢 I also tried to disable old architecture and edge-to-edge, same result.

Here is part of the generated manifest:

<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:localeConfig="@xml/locales_config">
    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
    <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|locale|layoutDirection" android:launchMode="singleTask" android:windowSoftInputMode="adjustPan" android:theme="@style/Theme.App.SplashScreen" android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="startuphub"/>
      </intent-filter>
      <intent-filter android:autoVerify="true" data-generated="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <category android:name="android.intent.category.DEFAULT"/>
      </intent-filter>
    </activity>
  </application>

[okwasniewski]

So for me when adding adjustPan bottom tabs stay correctly behind the keyboard.

In the app.json I have:

    "android": {
      "softwareKeyboardLayoutMode": "pan"
    },

CleanShot.2025-06-04.at.18.05.29.mp4

Here is an example SDK 53 Repository with this working: https://github.com/okwasniewski/bottom-tabs-sdk53

[rosskhanas]

@okwasniewski thank you for paying attention to this.

After investigation, I found that it does not work in my case because I use KeyboardAvoidingView from react-native-keyboard-controller. Once I change to the one from react-native, it starts working as expected.

[rosskhanas]

Thank you for this great package 🙂

[saif-o99]

Hey @okwasniewski, im having this bug. i tried the solution above in android manifest but didn't work for me
i tried even to replace react-native-keyboard-controller with react-native but still didn't work.

Anyway we should be able to keep using the package if its the problem because its the most recommended one for KeyboardAvoidingView

i'm also using newArch, react-native-edge-to-edge.

Could you kindly help on this?

[mvrty]

I had this issue when using react-native-keyboard-controller and react-native-edge-to-edge. React-native-keyboard-controller sets "adjustResize" on all Keyboardavoidingview, so changing to adjustPan in AndroidManifest doesn't change anything. Fixed using the following patch for react-native-bottom-tabs

diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt
index 1d0c4047e10cb9398208ea572463cd08d88699e6..1e023d93a504be135087d3a33dcf6a941ce14879 100644
--- a/android/src/main/java/com/rcttabview/RCTTabView.kt
+++ b/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -19,6 +19,9 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.TextView
+import androidx.core.graphics.Insets
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.forEachIndexed
 import coil3.ImageLoader
 import coil3.asDrawable
@@ -38,6 +41,18 @@ import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY
 import com.google.android.material.transition.platform.MaterialFadeThrough
 
 class ExtendedBottomNavigationView(context: Context) : BottomNavigationView(context) {
+  init {
+    // Strip IME insets so Material's default listener doesn't push the tab bar
+    // above the keyboard in edge-to-edge mode.
+    // See https://github.com/material-components/material-components-android/issues/493
+    ViewCompat.setOnApplyWindowInsetsListener(this) { view, insets ->
+      val withoutIme = WindowInsetsCompat.Builder(insets)
+        .setInsets(WindowInsetsCompat.Type.ime(), Insets.NONE)
+        .build()
+      ViewCompat.onApplyWindowInsets(view, withoutIme)
+    }
+  }
+
   override fun getMaxItemCount(): Int {
     return 100
   }

[rayabelcode]

This is still reproducible on 1.3.1 under edge-to-edge (Android 15 / SDK 35), and I think it is worth reopening, because adjustPan does not actually fix it in a common setup.

The tab bar rising is not the library's Kotlin (it does no inset handling). It is Material's BottomNavigationView: its constructor installs a default inset listener that adds WindowInsetsCompat.getSystemWindowInsetBottom() to its own bottom padding, and that legacy accessor includes the IME inset. Under edge-to-edge the window is not resized, so the IME inset is dispatched down the tree, reaches ExtendedBottomNavigationView, and Material pads the bar by the keyboard height. Same behavior as material-components/material-components-android#493.

The adjustPan suggestion does not help when react-native-keyboard-controller is in the tree: its hooks call KeyboardController.setInputMode(SOFT_INPUT_ADJUST_RESIZE) at runtime, which overrides the manifest value. So the manifest lever is unavailable for anyone using keyboard-controller, and the fix has to live in the tab bar's own inset handling.

I opened #549 with a small fix that gives ExtendedBottomNavigationView its own inset listener applying system bars + display cutout only (IME excluded), returning the insets unconsumed so tab-screen inputs still get keyboard avoidance. It is a no-op outside edge-to-edge. There is also a patch-package diff floating in this thread doing roughly the same thing, but it belongs upstream.