How to always Show Bottom Tabs Label in React Native Navigation V5?

Question

return (
      <Tab.Navigator
        barStyle={{backgroundColor: '#F2F2F2'}}
        initialRouteName="Catalog">
        <Tab.Screen
          name="Settings"
          options={{
            tabBarLabel: 'Alterações',
            title: 'Configurações',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="cog" color="#000" size={22} />
            ),
          }}>
          {(props) => (
            <Settings
              {...props}
              params={{
                cpf: params.cpf ? params.cpf : cpf,
              }}
            />
          )}
        </Tab.Screen>

        <Tab.Screen
          name="Catalog"
          options={{
            tabBarVisible: false,
            title: 'Ofertas',
          }}>
          {(props) => (
            <Catalog
              {...props}
              params={{
                pracaId: params.pracaId ? params.pracaId : pracaId,
              }}
            />
          )}
        </Tab.Screen>
           [...]
      </Tab.Navigator>
    );

The documentations says to use the titleDisplayMode but where? when? I only find solution for older versions. I need it to v5. Please, can some one help me?

I have include some part of my code to understend how I'm using the lib

Answer 1

I have created this example where the HomeScreen always hide the bottom tab and the SettingsStack always show the bottom tab automatically. The key point is basically these lines of code, one have just a screen and the other one have a StackNavigator:

<Tab.Screen name="HomeScreen" component={HomeScreen} />
<Tab.Screen name="SettingsStack" component={SettingsStack} />

This example is similar to the one in the docs https://reactnavigation.org/docs/hiding-tabbar-in-screens/, but with more components.

The code below is in snack, check if this helps you: https://snack.expo.io/@ronicesarrc/react-navigation-hiding-showing-bottom-tab-navigator

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

function SettingsInternalScreen() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'orange',
      }}>
      <Text>SettingsInternalScreen!</Text>
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <TouchableOpacity
        style={{ backgroundColor: 'orange', padding: 16 }}
        onPress={() => navigation.navigate('SettingsInternalScreen')}>
        <Text>Go to Screen showing bottom tab</Text>
      </TouchableOpacity>
    </View>
  );
}

const SettingStack = createStackNavigator();

function SettingsStack() {
  return (
    <SettingStack.Navigator>
      <SettingStack.Screen name="SettingsScreen" component={SettingsScreen} />
      <SettingStack.Screen
        name="SettingsInternalScreen"
        component={SettingsInternalScreen}
      />
    </SettingStack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        style={{ backgroundColor: 'gray', padding: 16 }}
        onPress={() => navigation.navigate('HomeInternalScreen')}>
        <Text>Go to Screen hidding bottom tab</Text>
      </TouchableOpacity>
    </View>
  );
}

function HomeInternalScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>HomeInternalScreen!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

const Tabs: React.FC = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="SettingsStack" component={SettingsStack} />
    </Tab.Navigator>
  );
};

const MainStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <MainStack.Navigator headerMode="none">
        <MainStack.Screen name={'Tabs'} component={Tabs} />
        <MainStack.Screen
          name={"HomeInternalScreen"}
          component={HomeInternalScreen}
        />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}

Answer 2

There is a shifting prop that you can put to false in your navigator :

 <Tab.Navigator
    barStyle={{backgroundColor: '#F2F2F2'}}
    initialRouteName="Catalog"
    shifting={false} 
  >
   .....

Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.

By default, this is true when you have more than 3 tabs. Pass shifting={false} to explicitly disable this animation, or shifting={true} to always use this animation.

https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator#shifting