Finalizing our app

At this point, we need to add some icons to the Bottom Tab Navigator.. But how should we do this? Luckily for us, React Navigation has a pretty straightforward way of modifying its default components.

And because we're already here, we should also change the focus color of whatever tab we're using at the moment.

So, let's go back to our routes.js file. Because we want to add icons to our tabs, we should import the Icon component from 'galio-framework'. After all the imports, we should write the following:

import { Icon } from 'galio-framework';

Now that we've imported the component that we'll use to display icons, let's see how we should do that. Search your AppTabs() function and find the <Tab.Navigator /> component. Here, we'll add two new props called screenOptions and tabBarOptions. Let's quickly check them out and see how exactly we're using them to implement an icon inside our...