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.
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}/>
)
}
},