CODEWITHSUNDEEP
react-native
Daniel Pinnington
Daniel Pinnington

Reputation: 61

React Native Bottom Tab Navigator - Icons not displaying

/* 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 emulator 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

Upvotes: 5

Views: 8916

Answers (4)

Shankar Gade
Shankar Gade

Reputation: 1

Open the setting.gradle and add the following line:

include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
includeBuild('../node_modules/react-native-gradle-plugin')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
}

Upvotes: 0

Sikander Bakht
Sikander Bakht

Reputation: 327

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} />

Upvotes: 2

Hamas Hassan
Hamas Hassan

Reputation: 941

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.

Upvotes: 5

GrgaMrga
GrgaMrga

Reputation: 530

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.

Upvotes: 6

Related Questions