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.