screenOptions:{{tabBarHideonKeyboard: true}} not Working

Question

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.

Scandic

what Tab are you using? there are 3 tabs in react-navigation – Kingcraft

Please provide enough code so others can better understand or reproduce the problem. – Pelagi

@Kingcraft I am using bottom tab navigator – Scandic

Answer 1

Add "softwareKeyboardLayoutMode": "pan" in app.json file under "android" key and then restart your expo server with expo start -c

Adularia

Gonna mess up your keyboardavoidingviews – Helaina

it worked, Thansk – Monstrance

Answer 2

<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

Brout

It's not working @Zacquio, I'm using tabBar custom component with position: "absolute"; – Piccadilly

screenOptions={{ tabBarHideOnKeyboard: true}} is the how it is done now. " tabBarOptions={{" is deprecated. – Bomber

Answer 3

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.

Greg

Answer 4

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.

Gertrudegertrudis

Answer 5

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

Kingcraft

Didn't worked.. – Scandic

what didn't work? did you get error? do you still get the tabBarHideOnKeyboard` value from if you follow some of my code? – Kingcraft

I get the tabBarHideonKeyboard value true but still bottom tab bar doesn't hide when keyboard opens – Scandic

@AdeelYousaf, how do you handle it? can you show me the code? – Kingcraft

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. – Scandic

@AdeelYousaf no problem – Kingcraft