CODEWITHSUNDEEP
react-nativereact-native-navigation
Cactus
Cactus

Reputation: 924

react-native-navigation: how to hide bottomTabs when keyboard is shown?

I am using the bottomTabs navigator from react-native-navigaton to navigation within my app. However, each time I have for example a TextInput field, the bottomTabs are being pushed up.

What is a possible way to hide the bottomTabs whenever the keyboard is being shown?

Upvotes: 2

Views: 8826

Answers (6)

Shivanand Muddi
Shivanand Muddi

Reputation: 21

add this code tabBarHideOnKeyboard: true, in
<Tab.Navigator initialRouteName={DashboardName} screenOptions={({ route }) => ({ tabBarActiveTintColor: "#3a98cf", tabBarInactiveTintColor: "#fff", tabBarHideOnKeyboard: true, />

Upvotes: 1

Madhav
Madhav

Reputation: 351

For a custom Tabbar use below code with some animation

import { Keyboard } from 'react-native';
import Animated, {
    Easing,
    useAnimatedStyle,
    useSharedValue,
    withTiming,
} from 'react-native-reanimated';
import { initialWindowMetrics } from 'react-native-safe-area-context';

const { insets } = initialWindowMetrics || {};
const defaultHeight = 48 + (insets?.bottom ?? 0);
const CustomTabBar = () => {
    const isVisible = useSharedValue(0);

    useEffect(() => {
        const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
            isVisible.value = withTiming(0, {
                duration: 500,
                easing: Easing.inOut(Easing.ease),
            });
        });
        const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
            isVisible.value = withTiming(defaultHeight, {
                duration: 500,
                easing: Easing.inOut(Easing.ease),
            });
        });

        return () => {
            showSubscription.remove();
            hideSubscription.remove();
        };
    }, []);

    const keyboardStyles = useAnimatedStyle(() => ({
        height: isVisible.value,
    }));

    return <Animated.View style={keyboardStyles}></Animated.View>;
};

Upvotes: 1

Nivethan
Nivethan

Reputation: 3599

Answer for React Navigation V6 with or without a Custom tabBar

I'm using react navigation V6 since i'm using a custom tabBar the tabBarHideOnKeyboard: true prop not working but when i change the custom tabBar to default tab bar that prop works but i don't like the behavior of that prop on android, so i used keyboard from react-native to check if the keyboard is active or not and setting the css display prop to 'none'

  import { Keyboard, View } from "react-native";

  const [keyboardStatus, setKeyboardStatus] = useState<boolean>();

  useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardStatus(true);
    });
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardStatus(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

so on the custom tab bar component now we can do like this.

    <View style={
      [
        styles.mainContainer,
        keyboardStatus ? styles.hideTabNavigation : null,
      ]
    }
    >
    // your code here
   </View>

Hope this will help someone until they fix this issue!

Upvotes: 2

Alex Skotner
Alex Skotner

Reputation: 602

just add tabBarHideOnKeyboard: true to screenOptions

Upvotes: 9

U.A
U.A

Reputation: 3373

You can programmatically hide the bottom tab when the keyboard is open using React hooks

  const _keyboardDidShow = useCallback(() => {
    navigation.setOptions({
      tabBarVisible: false,
    });
  }, [navigation]);

  const _keyboardDidHide = useCallback(() => {
    navigation.setOptions({
      tabBarVisible: true,
    });
  }, [navigation]);

  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
    Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
    };
  }, [_keyboardDidHide, _keyboardDidShow]);

Upvotes: 2

we22gz
we22gz

Reputation: 403

Add the following to your android manifest in android/app/src/AndroidManifest.xml

in your activity tag add/replace this attribute

the bottom tab should be hidden now.

android:windowSoftInputMode="stateUnspecified|adjustPan"

Upvotes: 3

Related Questions