tabbarhideonkeyboard problem

[Ahsan-Ullah1871]

Hello ALL.
I am trying to hide the bottom tab bar when the keyboard appears.
So I used {tabbarhideonkeyboard =true } inside tab.input . Its working fine but with a sightly animation in android.
When the keyboard appears bottom tab bar pushes up for a while and then hides. It's looking very ugly.

I tried many answers, like changing "adjustresize " to "adjustPan " in side androidMainfest.xml file, and set the Custom keyboard hook for hiding tabbar . But none of those are working.

Anyone can give me the exact solution with {tabbarhideonkeyboard =true } option .
I am using "@react-navigation/bottom-tabs": "^6.2.0",

[raajnadar]

Please read this doc, specifically the yellow box https://reactnative.dev/docs/keyboard#addlistener

Quote from the docs -

Note that if you set android:windowSoftInputMode to adjustResize or adjustPan, only keyboardDidShow and keyboardDidHide events will be available on Android. If you set android:windowSoftInputMode to adjustNothing, no events will be available on Android. keyboardWillShow as well as keyboardWillHide are generally not available on Android since there is no native corresponding event.

We don't have any listeners to do some action before the keyboard opens on android so we need to hide after the keyboard is open

[Ahsan-Ullah1871]

That means , there have no option to hide the bottom tab bar without action right ?
So is it not possible to hide the tab bar smoothly without pushing up, like make the position absolute or make display none?

I think in ios its not pushing up its hiding smoothly.

[raajnadar]

Yes, you can use your custom logic, animation & transitions, but you cannot do this before the keyboard appears on android as there are no options exposed by react native.

For iOS we have the methods to run some code before the keyboard appears, I recommend you to check the document for more info

[raajnadar]

It seems in the react native next version the support is added on android for keyboardWillShow & keyboardWillHide https://reactnative.dev/docs/next/keyboard#addlistener

[garmoshka-mo]

You can make tabBar to be positioned absolutely top: (screen height - tabBar height) - then keyboard will simply cover it