React Native
Tab icons
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.
Exercise 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).
Show example 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.
Test yourself
-
Match the concept to its role
- tabBarIcon
- Draws the icon
- color
- Icon color
- size
- Icon size
- Ionicons
- Icon set
-
What does the tabBarIcon function return?
tabBarIcon: ({ color, size }) => /* ... */
- An icon component
- Bir dize
- A number
- Bir dizi
Show answer
An icon component — tabBarIcon returns an icon component.
-
Import Ionicons
import { ____ } from "@expo/vector-icons";
Show answer
import { Ionicons } from "@expo/vector-icons";
Next lesson: Material Top Tabs
