How to prevent hiding on keyboard (iOS)

[Robert27]

The tabbar is hiding when opening the keyboard which creates an ugly content jumping effect. React Navigation has the prop tabBarHideOnKeyboard to control this behavior. iOS only.

Below a screen recording showing the issue. Note how the map positions changes when opening the keyboard.

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-01-24.at.03.26.06.mp4

@okwasniewski

[okwasniewski]

Hey!

Thanks for opening the discussion. Looks like there is a way to handle this in SwiftUI and prevent the keyboard from closing bottom nav (https://stackoverflow.com/questions/63996853/swift-prevent-tabbar-from-moving-up-when-keyboard-is-active).

Can you create me a small reproduction example of the issue? This would be really helpful 🙏

[Robert27]

Thanks for your reply. I did some more research and found out that the shifting only happens when using MaplibreGL, which is also a native iOS library.
Probably the height calculation of the view is off when using two native components.
In the past when we used JavaScript tabs and the only way to fix the shifting was setting “hide on keyboard” to false. Now I guess the tabbar gets still hidden, but react native handles it for its JavaScript components.

In you are still interested in looking at this issue, I’ll create a reproduction project with both libraries.

[Robert27]

Update: I added the .ignoresSafeArea(.keyboard, edges: .bottom) which improved the behavior a lot, but it is still present.

Screen.Recording.2025-01-27.at.15.28.02.mov

Using safe are view does the rest for me tho, but still needs the ignoresSafeArea swift prop.

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

[Robert27]

Tested it and can confirm it works. Thanks a lot!