screenOptions:{{tabBarHideonKeyboard: true}} not Working

user_17495613 0
Viewed 1023

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.

react-navigation-v6 react-native tabbar
4 Answers

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

user_153308190

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

user_78702110 
<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

user_137465950

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.

user_100771330
Related