When I am using custom tab bar through tabBar
function tabBarHideOnKeyboard
does not work but without tabBar
function it works fine, any ideas on how I can make it work using tabBar
function as well.

- 1,084
- 1
- 9
- 23

- 31
- 1
- 2
-
what Tab are you using? there are 3 tabs in `react-navigation` – jted95 Nov 24 '21 at 08:59
-
Please provide enough code so others can better understand or reproduce the problem. – Community Nov 29 '21 at 00:35
-
@jted95 I am using bottom tab navigator – Adeel Yousaf Nov 29 '21 at 07:49
5 Answers
Add "softwareKeyboardLayoutMode": "pan"
in app.json file under "android" key and then restart your expo server with expo start -c

- 136
- 7
<Tab.Navigator
tabBarOptions={{
showLabel: false,
keyboardHidesTabBar: true, // use this props to hide bottom tabs when keyboard shown
}}
the docs says to use tabBarHideOnKeyboard
, but not working at all.
then i found keyboardHidesTabBar
and works like a charm

- 309
- 3
- 2
-
1It's not working @Zacquio, I'm using tabBar custom component with **position: "absolute";** – AliRehman7141 Apr 18 '22 at 07:15
-
screenOptions={{ tabBarHideOnKeyboard: true}} is the how it is done now. " tabBarOptions={{" is deprecated. – jessiPP Oct 12 '22 at 06:58
You'll get the tabBarHideOnKeyboard
from the props for the custom tabBar
.
tabBar={(props) => {
return (
<View>
{props.state.routes.map((route, index) => {
// You can replace Pressable and View with anything you like
return (
props.descriptors[route.key].options.tabBarHideOnKeyboard && (
<Pressable>
<View
style={{
width: 200,
height: 200,
backgroundColor: "green",
}}
/>
</Pressable>
)
);
})}
</View>
);
You can read more here

- 1,084
- 1
- 9
- 23
-
-
what didn't work? did you get error? do you still get the tabBarHideOnKeyboard` value from if you follow some of my code? – jted95 Nov 29 '21 at 11:05
-
I get the tabBarHideonKeyboard value true but still bottom tab bar doesn't hide when keyboard opens – Adeel Yousaf Nov 29 '21 at 13:24
-
-
issue has been resolved, I added a keyboard listener and on keyboardopen changed the value of bottom to negative which worked for me, btw thanks a lot. – Adeel Yousaf Dec 01 '21 at 07:07
-
I was using my customTab as well. And after huge amount of search, solved the problem with the help of Keyboard event listeners.
This is the best solution, I've found so far.
Here's my solution:
import { useEffect, useState } from "react";
import { Keyboard, Text, TouchableOpacity, View } from "react-native"
export default function TabBar({ state, descriptors, navigation }) {
// As default it should be visible
const [visible, setVisible] = useState(true);
useEffect(() => {
const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
//Whenever keyboard did show make it don't visible
setVisible(false);
});
const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
setVisible(true);
});
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, []);
//Return your whole container like so
return visible && (
<View>
...
</View>
)
tabBarHideOnKeyboard
or keyboardHidesTabBar
options didn't work for me.

- 158
- 11
If you are not using a custom tab bar with v6 you can use
screenOptions={{
tabBarHideOnKeyboard: true,
}}
But with a custom tab bar, you have to manage that yourself. The way I did it was to create a custom hook that tracks the keyboard's status and change the tabBarStyle
according to that.
screenOptions={{
tabBarStyle: { display: keyboardStatus ? 'none' : 'flex' },
}}
where keyboardStatus
is a hook that returns true or false using the useLayoutEffect
hook from react and the Keyboard.addListener() from react-native.

- 817
- 1
- 11
- 16