[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 🙂