Navigation options - TabBarVisible and TabBarIcon - undefined is not an object

Question

After a lot of research I have found the solution of Emmie to hide the tab bar on some screens. React navigation 5 hide tab bar from stack navigator However, I am facing two problems.

On the one hand, Emmie's solution works well when first rendering the app, but if I later "save again" the .js it crashes, showing the error "undefined is not an object (evaluating '_this._getTabBarVisibility').
Secondly, this will sound stupid (I'm new to programming) but I don't know how to simultaneously have the tabBarIcon function. Currently the app only reads the first set of options, which sets the TabBarVisible. Therefore it doesn't render the icon for the 'Wallet' Screen

Here is my simplified code:

import * as React from 'react';
import { createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createStackNavigator } from '@react-navigation/stack';

import WalletScreen from '../Screens/WalletScreen.js'
import SettingsScreen from '../Screens/SettingsScreen.js'

import BusinessScreenTab from './BusinessScreenTab'

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

  function WalletStack (){
    return(
      <Stack.Navigator 
      initialRouteName='Wallet'
      headerMode='none'>
          <Stack.Screen name='Wallet' component={WalletScreen}/>      
          <Stack.Screen name='Business' component={BusinessScreenTab} /> 
      </Stack.Navigator>
    )}

    _getTabBarVisibility = (route) => {
      const routeName = route.state
        ? route.state.routes[route.state.index].name
        : ''; 
      if (routeName === 'Business') {
        return false;
      }
      return true;
    }

export default function MainAppTab () {
    return(
          <Tab.Navigator 
          initialRouteName='Purchase'
          tabBarOptions={{
            keyboardHidesTabBar: 'true',
            showLabel: 'false',
          }}
          >
            <Tab.Screen name='Wallet' 
              component={WalletStack}
              options={({ route}) => ({
                tabBarVisible: this._getTabBarVisibility(route),
              })}
options={{
                tabBarIcon: ({color,size}) => (
                  <Ionicons name='ios-filing' color={color} size={size}/>),
              }}
              
              />
            <Tab.Screen name='Settings' 
              component={SettingsScreen}
              options={{
                tabBarIcon: ({color,size}) => (
                  <Ionicons name='ios-settings' color={color} size={28}/>),
              }}/>
          </Tab.Navigator>
    )
  }

Thanks in advance!

score 0 · Answer 1 · answered Sep 01 '20 at 09:01

0

Try below code,

 <Tab.Navigator
    tabBarOptions={{
      activeTintColor: '#0093cb',
      keyboardHidesTabBar:true,
      style: {
        // Remove border top on both android & ios
        borderTopWidth: 1,
        borderTopColor: "#999999",

        },
      }
    }
  >
    <Tab.Screen name="Wallet" component={Wallet StackScreen}
      options={{
        tabBarLabel: 'Wallet',
        tabBarIcon: ({ color, size }) => (
              <Ionicons name='ios-filing' color={color} size={size}/>),
        ),
      }}
    />
    <Tab.Screen name="Settings" component={Settings}
      options={{
        tabBarLabel: 'Settings',
        tabBarIcon: ({ color, size }) => (
              <Ionicons name='ios-settings' color={color} size={28}/>),
        ),
      }}
    />
   

  </Tab.Navigator>

answered Sep 01 '20 at 09:01

Ashish Sahu

388
3
16

Hello Ahsish, your code doesn't seem to resolve my question. I am having issues with 'this' when calling _getBarVisibility and I also don't know how to have both the TabBarIcon function and the TabBarVisible function simultaneously – Mireia Sep 01 '20 at 09:11
Hello Mireia, If you want to hide the tab bar when we navigate from the feed Wallet to a Business screen without shuffling navigators, we cannot set the tabBarVisible: false configuration in navigationOptions on BusinessScreen, because those options will only apply to the FeedStack. Instead, we can do it too, please check my new answer below – Ashish Sahu Sep 01 '20 at 09:21

score 0 · Answer 2 · answered Sep 01 '20 at 09:26

For hiding tab bar:

  const FeedStack = createStackNavigator({
  Wallet: WalletScreen,
  Business: BusinessScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

This will hide the tab bar any time we navigate away from the feed home. We could switch visibility based on route name, but it would be strange to have the tab bar be hidden and then appear again when pushing another route — it should only be visible when returning to a route where it was previously visible.

Navigation options - TabBarVisible and TabBarIcon - undefined is not an object

2 Answers2