CODEWITHSUNDEEP
react-nativeexpo
Vince Carter
Vince Carter

Reputation: 946

React Native: Dont see FontAwesome or any other expo/vector icons

I am facing some problems with FontAwesome icons. (I have tried with MaterialCommunityIcons and normal Icons, but the same result)

They don't appear in the bottom Tab navigation, as also under Social networks. (The other icons are from react-native-settings-page)

Here is a screenshot:

enter image description here

Here is the TabNavigation:

import React from 'react';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import HomeNavigator from '../navigation/HomeNavigator';
import NewsNavigator from '../navigation/NewsNavigator';
import settings from '../config/settings';
import i18n from "../locales/i18n";

const Tab = createBottomTabNavigator();

function TabNavigation(props) {
    return (
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ color }) => {
                let iconName;
                if (route.name === 'Home') {
                    iconName = 'home';
                }
                else if (route.name === 'News') {
                    iconName = 'newspaper';
                }
                // You can return any component that you like here!
                return <MaterialCommunityIcons color={color} icon={iconName} size={25} />;
            },
        })}
        tabBarOptions={{
            activeTintColor: settings.colors.activecolor,
            inactiveTintColor: settings.colors.fontcolor,
            activeBackgroundColor: settings.colors.navigation,
            inactiveBackgroundColor:settings.colors.navigation,
        }}
        >
          <Tab.Screen name="Home" options={{ tabBarLabel: i18n.t('navigation.home')  }} component={HomeNavigator} />
          <Tab.Screen name="News" options={{ tabBarLabel: i18n.t('navigation.news')  }} component={NewsNavigator} />
        </Tab.Navigator>
      );
}

export default TabNavigation;

Here are my colors, but I think they are not making the problem:

export default {
    colors: {
        navigation: '#000',
        bgcolor: "#000",
        fontcolor: '#fff',
        activecolor: '#dd163b',
        settingsbackground: '#c3c3c3',
    },
    languages: {

    }
}

Upvotes: 0

Views: 397

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You are using tabBarIcon as part of the navigator this should be passed to the screen level options like below

  <Tab.Screen
    name="Home"
    options={{
      tabBarLabel: i18n.t('navigation.home'),
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="home" color={color} size={20} />
      ),
    }}
    component={HomeNavigator}
  />
  <Tab.Screen
    name="News"
    options={{
      tabBarLabel: i18n.t('navigation.news'),
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="newspaper" color={color} size={20} />
      ),
    }}
    component={NewsNavigator}
  />

Upvotes: 1

Related Questions