React Native Bottom Tab Navigator - Icons not displaying - react-native

Question

/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import * as React from 'react';
import Home from '../screens/home';
import Review from '../screens/reviewDetails';
import Profile from '../screens/profile';
import Settings from '../screens/settings';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { COLORS, icons } from '../constants';
import { Image } from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
export default function HomeStack() {
return (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="Home" component={Home} options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}} />
<Tab.Screen name="Review Details" component={Review} options={{
tabBarLabel: 'Review',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}} />
<Tab.Screen name="Profile" component={Profile} options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}} />
<Tab.Screen name="Settings" component={Settings} options={{
tabBarLabel: 'Settings',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}} />
</Tab.Navigator>
);
}
my code for a bottom tab navigator runs without any errors however when run in the emmulator the icons on the navigator do not display they are replaced by a crossed box? the tab navigator is also contained within a drawer content navigator which is in turn the child of a root stack navigator. all dependencies have been installed yet the error persists

Answer 1

Reading the documentation of the Tab.Navigator, you should define the icons inside of that. It would look like this:
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
This means you would be changing the component based on the route name. The reason behind it is that Tab.Screen should have information about the screen that will be displayed, while Tab.Navigator should handle the navigator (bottom strip with tabs) part of navigation.

Answer 2

Crossed box on android might come when the react-native-vector-icons is not link properly.
run this command
react-native link react-native-vector-icons
and in android/app/build.gradle file add this.
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
I hope this will fix your crossed box issue.

Answer 3

return statement is missing in your code.
You can do it like this:
<Tab.Screen name="Review Details" component={Review} options={{
tabBarLabel: 'Review',
tabBarIcon: ({ color }) => (
return <MaterialCommunityIcons name="home" color={color} size={26} />
),
}} />
So update this line,
<MaterialCommunityIcons name="home" color={color} size={26} />
to this
return <MaterialCommunityIcons name="home" color={color} size={26} />