Build React Native WordPress App [Expo way] #3 : Add Vector Icons

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since we successfully build an app on the React Native CLI path., for the next step, we try to develop this app again but using Expo. We will discover the Expo ecosystem that makes our lives comfortable and help us avoid dealing with Native modules to learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll, in-app purchase, and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native Templates from instamobile

in this chapter we gonna add expo vector icon to tab navigation make our bottom tabs look nice if you’re remembered for React native CLI path that so a lot of configuration on both Android and iOS but for Expo manage workflow we just install expo vector icon package and boom done

firstly we install expo-vector icon package

yarn add @expo/vector-icons

next, we import to Navigator.js

import { MaterialCommunityIcons } from '@expo/vector-icons';

this package has many icon types for but MaterialCommunityIcons provide many types of icon

for using icon we inject screenOption props of

<Tab.Navigator screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;

                    if (route.name === 'Home') {
                        iconName = focused ? 'home' : 'home-outline';
                    } else if (route.name === 'Bookmark') {
                        iconName = focused ? 'bookmark' : 'bookmark-outline';
                    } else if (route.name === 'Categories') {
                        iconName = focused ? 'apps' : 'apps-box';
                    } else if (route.name === 'Settings') {
                        iconName = focused ? 'settings' : 'settings-box';
                    }
                    return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
                },
            })}
                tabBarOptions={{
                    activeTintColor: 'tomato',
                    inactiveTintColor: 'gray',
                }?

here we use tab bar icon for add icon to tab bar then use route name for deciding what icon that we want to use in this menu and when tab bar got focus we use different icon style

here we got a nice tab bar easily than using CLI

Conclusion

this chapter we learn to compare for using the Expo icon package that helps us skip touch Xcode and Android studio is pretty cool . for the next chapter we learn to create a Home screen using React native paper another cool UI kit from the Expo team then interact Wordpress API Stay tuned.

Originally published at Kriss.