I have This navigation, how can I add Icons on the bottomTabNavigator
const switchNavigator = createSwitchNavigator({
mainFlow: createBottomTabNavigator({
Home: createStackNavigator({
Search: SearchScreen,
Results: ResultsShowScreen
}),
Map: AccountScreen,
Scanner: AccountScreen,
Account: AccountScreen
})
});
U can add icons to tabs using defaultNavigationOptions, here is an example,
more information about tabs can be got from https://reactnavigation.org/docs/en/4.x/tab-based-navigation.html
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);```
Related
I am using react navigation version 4.
My goal is to hide the tab bar navigator only on the done screen.
neither
tabBarStyle: { display: "none" }
nor
tabBarVisible: false
work.
My navigator looks like this:
const navigator = createSwitchNavigator({
resolveAuth: ResolveAuthScreen,
default: createBottomTabNavigator({
unAuthenticatedFeed: UnAuthenticatedFeedScreen,
camera: UnavailableScreen,
signupFlow: createStackNavigator({
selectAuthentication: SelectAuthenticationScreen,
login: LoginScreen,
signup: SignupScreen,
forgotPw: ForgotPasswordScreen,
storageChoice: StorageChoiceScreen,
validateSeedPhrase: validateSeedPhraseScreen,
done: {
screen: DoneScreen,
navigationOptions:{
headerShown: false,
tabBarStyle: { display: "none" },
tabBarVisible: false
}
}
})
}),
mainFlow: createBottomTabNavigator({
feed: FeedScreen,
camera: CameraScreen,
profile: ProfileScreen,
}),
})
does anyone know why this could be the case?
thanks for any advice!
I solved it with:
signupFlow.navigationOptions = ({navigation}) =>{
let tabBarVisible = true;
let routeName = navigation.state.routes[navigation.state.index].routeName
if ( routeName == 'done' ) {
tabBarVisible = false
}
return {
tabBarVisible,
}
}
const navigator = createSwitchNavigator({
resolveAuth: ResolveAuthScreen,
default: createBottomTabNavigator({
unAuthenticatedFeed: UnAuthenticatedFeedScreen,
camera: UnavailableScreen,
signupFlow: signupFlow
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state
let iconName
if (routeName === 'unAuthenticatedFeed') {
iconName = focused ? 'home' : 'home'
return <Feather name={iconName} size={25} color={tintColor} />
}
else if (routeName === 'camera') {
iconName = focused ? 'camera' : 'camera'
return <Feather name={iconName} size={25} color={tintColor} />
}
else if (routeName === 'signupFlow') {
iconName = focused ? 'login' : 'login'
return <Entypo name={iconName} size={25} color={tintColor} />
}
},
}),
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'gray',
showLabel: false
},
})}
I want to display bottom tab tar in react-navigation 4, but there is no luck to make it happen, even I use it. Can anyone help me to find the problem with my code or which option should I use?
static navigationOptions = {
title: "Map",
tabBarIcon: ({ tintColor }) => {
return <Icon name="home" size={30} color={tintColor} />;
}
}
in any component screen, it does still not work.
Here is my router
I want to apply the bottom tab icon to homescreen
const MainAuthenticated = createAppContainer(
createBottomTabNavigator(
{
main: {
screen: createBottomTabNavigator({
Marketplace: {
screen: createStackNavigator({
home: {
screen: HomeScreen,
},
profile: { screen: Profile },
business: { screen: MyBusiness },
logout: { screen: Logout },
itemlist: { screen: ItemList },
itemcreate: { screen: ItemCreate },
itemdetail: { screen: ItemDetail },
businesscreate: { screen: BusinessCreate },
businessdetail: { screen: MyBusinessDetail },
}),
},
XOrders: { screen: OrderScreen },
Favorite: { screen: FavoriteScreen },
}),
},
},
{
defaultNavigationOptions: {
tabBarVisible: false,
},
},
),
);
Here is the working code to add the bottom tab bar icon in react-navigation v4
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
If you wanted to use some .png or jpeg or some other image file instead of vector icons just replace this
<IconComponent name={iconName} size={25} color={tintColor} /> // replace this with below
<Image source={require('your image path')} style={{height: 30, width: 30}} />
const OneNav = createStackNavigator({
Home: {screen: pages.Home},
Social: {screen: pages.Social},
House: {screen: pages.House},
},{
initialRouteName: 'Home',
});
const TwoNav = createStackNavigator({
Home: {screen: Two}
},{
initialRouteName: 'Home',
});
const TabNav = createBottomTabNavigator({
Home: {screen: OneNav},
Interact: {screen: TwoNav},
},{
initialRouteName: 'Check',
defaultNavigationOptions: {
headerTitle: () => (
<View>
<Logo />
</View>)
}
});
How do you add icons to each tab in the tabnavigator here? Right now only the text is showing. What do I add to TabNav to add icons for Home and Interact?
Below is the code you can try :
// You can import Ionicons from #expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = `ios-options`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
More you can read here from their official docs
I hope this helps....Thanks :)
I have a stack navigator which is then nested inside a drawer navigator. I want to have an icon for each of the routes in the stack navigator to then show in the drawer menu.
I have tried to use the navigationOptions to provide each route with a drawer icon in the stack navigator but this did not work.
const StackNavigation = createStackNavigator(
{
Setting: {
screen: SettingScreen,
navigationOptions: {
drawerIcon: ({ tintColor }) => <Feather name="settings" style={{ fontSize: 24, color: tintColor }} />,
},
},
Home: {
screen: HomeScreen,
navigationOptions: {
drawerIcon: ({ tintColor }) => <Feather name="home" style={{ fontSize: 24, color: tintColor }} />,
},
},
},
{
initialRouteName: 'Home',
headerMode: Platform.OS === 'android' ? 'screen' : 'float',
defaultNavigationOptions: ({ navigation }) => ({
headerLeft: <MenuButton navigation={navigation} />,
}),
}
);
const MainNavigation = createDrawerNavigator(
{
Home: {
screen: StackNavigation,
},
},
{
contentComponent: CustomDrawerComponent,
}
);
No icons are applied when attempted this way. Possibly because stack navigator does not have a drawerIcon option? But then I how do I apply them to each route individually...
If you have two paths,
import Icon from 'react-native-vector-icons/FontAwesome';
...
const MainTab = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Setting: {
screen: SettingScreen
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
drawerIcon: ({ focused, horizontal, tintColor, image }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === "Home") {
iconName = "home";
} else if (routeName === "Setting") {
iconName = "rocket";
}
return (
<Icon
name={iconName}
size={horizontal ? 20 : 25}
/>
);
}
})
}
What is the best way to have a header with the page title with a tab navigator with react native? I know there is a way to wrap you TabNavigator inside of StackNavigator, but I do not understand how to do this with different components in different classes...
This is what I am doing to set up the TabNavigator:
Inside App.js:
export default createBottomTabNavigator(
{
Activity: Activity,
Front: Front
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Activity') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Front') {
iconName = `ios-cog`;
}
return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
});
Each tab can be a StackNavigator, for example:
const activityStackNavigator = createStackNavigator({
Activity: {
screen: Activity,
navigationOption: {
headerTitle: 'Some title...'
}
}
})
And then in your TabNavigator just use the StackNavigator you just created as a screen:
export default createBottomTabNavigator(
{
Activity: activityStackNavigator,
Front: Front
},
...
}
Here's some read from the React-Navigation docs.