Unable to add an Icon to Bottom Tab Bar with Nested Stack Navigator

Question

I have this Navigator which I'm trying to add 1 Icon and changing the background color of the Tab bar (if possible of the icons and Labels.

    import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { BottomTabBar, createBottomTabNavigator } from 'react-navigation-tabs';
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import TrackListScreen from './src/screens/TrackListScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import { Provider as AuthProvider } from './src/context/AuthContext';
import {setNavigator} from './src/navigationRef';
import ResolveAuthScreen from './src/screens/ResolveAuthScreen';
import Icon from 'react-native-vector-icons/Ionicons';  
 
const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  loginFlow: createStackNavigator({
    Signin: SigninScreen,
    Signup: SignupScreen,
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
    TrackCreate: {
      screen: TrackCreateScreen,
      navigationOptions:{
        tabBarLabel: 'Crear Track',
        tabBarIcon: ({tintColor})=>(  
          <Icon name="ios-analytics" color={tintColor} size={25}/>  
      )  
      }
    },
    Account: {
      screen: AccountScreen, 
      navigationOptions:{
        tabBarLabel: 'Cuenta',
        tabBarIcon: ({tintColor})=>(  
          <Icon name="ios-person" color={tintColor} size={25}/>  
      )  
      }
    },
  })
});

const App = createAppContainer(switchNavigator);

export default () => {
  return (
    <AuthProvider>
      <App  ref={(navigator) => {setNavigator(navigator)}}/>
    </AuthProvider>
  );
};

For just the tabs there was no issue but having a Tab that has the Nested Stack Navigator doesn't allow me to set up an Icon and a Label.

And I can't find any info or a way to add a background color to this Tab.

Any ideas?

Kind Regards.

Answer 1

This happen because you did not provide icon to the first tab. Please update tasklistflow with the following block

trackListFlow: {
      screen: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
      navigationOptions:{
        tabBarLabel: 'Task List Flow',
        tabBarIcon: ({tintColor})=>(  
          <Icon name="ios-analytics" color={tintColor} size={25}/>  
      )  
      }
    },