Tab icons
- React Native course
- Intermediate
- Lesson 49/116
- 5 min
Learn tab bar icons.
Tab icons
Adding icons to tabs makes the app more visual. You add tabBarIcon to the options prop of Tab.Screen. This is a function; it takes color and size as parameters and returns an icon component.
Example: options={{ tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }}. Ionicons is an icon set from the @expo/vector-icons package. It is the most common icon package in React Native projects. The color and size change based on tab focus; the focused tab gets a more prominent color. This keeps the icons in sync with the theme. The icon name must be one the set provides; a wrong name means no icon.
Practice Add icons to Tabs
Import createBottomTabNavigator as in the previous lesson and assign to Tab. Import Ionicons from @expo/vector-icons. HomeScreen and SearchScreen should be simple components. In the App component, add tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> to each Tab.Screen's options (use name="search" for Search).
Starter code
// Import the bottom tab navigator and the icon set; assign to Tab
// Write HomeScreen and SearchScreen
// Write the App component; add an icon-drawing field to each Tab.Screen's optionsSample solution
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function SearchScreen() { return <Text>Search</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Tab.Screen name="Search" component={SearchScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="search" color={color} size={size} /> }} />
</Tab.Navigator>
);
}Icon sets
@expo/vector-icons includes many icon sets: Ionicons, MaterialIcons, FontAwesome, MaterialCommunityIcons and more. Each set has its own icon names. The same concept can have different names across sets: "home" is in both Ionicons and MaterialIcons.
The set choice is a design preference. Ionicons is common for an iOS-like look, MaterialIcons for Android-like. Some sets offer different styles: FontAwesome for flat icons, MaterialCommunityIcons for many categories. Writing the icon name correctly is important; you must pick from the list the set provides. If you write a wrong name the icon does not show. In Expo projects these sets are installed by default; no extra package needed. This convenience is one of Expo's biggest advantages.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the concept to its role
| Term | Meaning |
|---|---|
tabBarIcon |
Draws the icon |
color |
Icon color |
size |
Icon size |
Ionicons |
Icon set |
2 What does the tabBarIcon function return?
tabBarIcon: ({ color, size }) => /* ... */- An icon component Correct answer
- Bir dize
- A number
- Bir dizi
Explanation: tabBarIcon returns an icon component.
3 Import Ionicons
import { ____ } from "@expo/vector-icons";import { Ionicons } from "@expo/vector-icons";Explanation: Ionicons is imported from @expo/vector-icons.