[iOS] Opening Keyboard creates Blank Area

[chitrakshtarun]

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

On iOS, when the keyboard is opened through either the header search bar or a <TextInput />, an empty blank area appears where the keyboard should be, and is then occupied by the keyboard.

This blank area gets completely covered by the keyboard using the header search bar. In case of a <TextInput /> a small blank area persists to appear.

This issue does not occur when using JS Bottom Tabs, or on Android.

Library version

0.8.2

Environment info

info Fetching system and libraries information...
System:
  OS: Linux 4.4 Ubuntu 20.04.3 LTS (Focal Fossa)
  CPU: "(16) x64 AMD Ryzen 7 5800H with Radeon Graphics         "
  Memory: 1.81 GB / 15.86 GB
  Shell:
    version: 5.0.17
    path: /bin/bash
Binaries:
  Node:
    version: 20.18.0
    path: ~/.nvm/versions/node/v20.18.0/bin/node
  Yarn:
    version: 1.22.19
    path: /mnt/c/Users/Fevenir/AppData/Roaming/npm/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Create an Expo app and install the react-native-bottom-tabs dependencies.
2. Replace JS tabs with the Native Bottom Tabs.
3. Add a <TextInput /> component, or enable the header search bar.
4. Toggle opening the keyboard through the <TextInput> or the header search bar.

Reproducible sample code

https://github.com/ChitrakshTarun/Bottom-Tabs-Keyboard-Repro

[chitrakshtarun]

Originally thought this was related to #224, however this seems to be independent to the bug discussed in that issue, so created a new issue.

The repo linked contains the same reproducible code as the video below.

Please let me know if I can help with any testing for this bug. Thank you!

Video reproduction

0:00 - 0:15 Using react-native-bottom-tabs
0:16 - 0:26 Using JS Bottom Tabs

Keyboard-Issue-Repro.mp4

[okwasniewski]

Hey, can you test "0.8.3-canary-20250130084049" version released from this PR #269? If it fixes your issue I will create 0.8.3 stable 🙏

[chitrakshtarun]

Hi, just got around to install 0.8.3 for the library and the bug is fixed, tysm! 🚀