New Jan 5, 2025

React-native-vector-icons/Ionicons icons are not displayed

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View React-native-vector-icons/Ionicons icons are not displayed on stackoverflow.com

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/home';
import Car from '../screens/Car';
import Services from '../screens/Services';
import Dialogs from '../screens/Dialogs';
import Profile from '../screens/Profile';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

export const HomeTabs = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarShowLabel: false,
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: 'black',
        tabBarIcon: ({ focused, color, size}) => {
          let iconName;
          if (route.name === 'HomeTabs') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Car') {
            iconName = focused ? 'car' : 'car-outline';
          } else if (route.name === 'Services') {
            iconName = focused ? 'construct' : 'construct-outline';
          } else if (route.name === 'Dialogs') {
            iconName = focused ? 'chatbubble' : 'chatbubble-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          }
          return <Ionicons name={iconName} size={focused? 25: size} color={color} />;
        }
      })}
    >
      <Tab.Screen name="HomeTabs" component={Home} />
      <Tab.Screen name="Car" component={Car} />
      <Tab.Screen name="Services" component={Services} />
      <Tab.Screen name="Dialogs" component={Dialogs} />
        <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
} 

I have such a code that is responsible for the bottom navigation, and I use the react-native-vector-icons and Ionicons library to get icons, but the icons are not displayed, instead they are just strikethrough squares. I must say right away that everything is spelled out correctly.

import type { Icon } from './index';

export type IoniconsGlyphs = 'accessibility' | 'accessibility-outline' | 'accessibility-sharp' | 'add' | 'add-circle' | 'add-circle-outlin...

declare export default Class<Icon<IoniconsGlyphs>>;

I decided to go downstairs to see what's inside the Ionicons, and why there were errors:

1)TS7016: Could not find a declaration file for module './index'. 'C:/Users/Autoservice_front/node_modules/react-native-vector-icons/index.js' implicitly has an 'any' type. 2)TS1120: An export assignment cannot have modifiers. 3)TS2552: Cannot find name 'Class'. Did you mean 'CSS'? 4)TS2714: The expression of an export assignment must be an identifier or qualified name in an ambient context.

And I thought maybe the problem was that there were errors and that's why the icons weren't displayed.

Scroll to top