React Native Vector Icons won't show in Bottom Tab Navigation in Android

Question

the icon shows in a screen/page, but won't show in the bottom navigation. Solutions that I've tried:

Follow the installation guide from github, I've tried both the GRADLE & MANUAL options, but same result
Have tried to ./gradlew clean then npx react-native run-android, but same result
Have tried to npx react-native link react-native-vector-icons then npx react-native run-android, but same result

screenshot bottom nav bar

screenshot setting screen

It does appear in screen/page as shown in above screenshot, but won't show in the bottom navigation.

NOTE: I've tested both in emulator and real android device, but still got same result!

Code for the bottom tab

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'



const BottomTab = createBottomTabNavigator();

const BottomTabNav = () => {
return (
    <BottomTab.Navigator>
        <BottomTab.Screen 
        name="Home" 
        component={ProductNavigation} 
        options={{
            tabBarLabel: "Home",
            tabBarIcon:({color, size}) => {
                <Ionicons name="home-outline" color={color} size={size} />
            }}} />

        <BottomTab.Screen 
        name="Settings" 
        component={SettingScreen}
        options={{
            tabBarLabel: "Settings",
            tabBarIcon: ({color, size}) => {
                <Ionicons name="settings-outline" color={color} size={size} 
    />
            
        }}} />
    </BottomTab.Navigator>
   )
  }

 export default BottomTabNav

 const styles = StyleSheet.create({})

Also can you help why does the bottom tab goes to the next page?? where should I edit the code, thanks in advance. Below is the Screenshot:

Can you show us the code for your tab navigator, where you have used the icons ? — Guruparan Giritharan, Nov 04 '20 at 10:42
I added the code, please kindly your help @GuruparanGiritharan thanks in advance my friend :) — Muhammad Haekal, Nov 05 '20 at 09:06
@MuhammadHaekal its an issue with the way you have used the arrow function, check my answer — Guruparan Giritharan, Nov 05 '20 at 09:14

score 7 · Accepted Answer · answered Nov 05 '20 at 09:14

7

The issue is very simple actually, you are not returning anything from the function,

    tabBarIcon: ({color, size}) => {
//nothing returned here
                    <Ionicons name="settings-outline" color={color} size={size} 
        />

You have to do this, either use brackets like below or use the return statement to your code.

tabBarIcon: ({color, size}) => (
                <Ionicons name="settings-outline" color={color} size={size} 
    />)

answered Nov 05 '20 at 09:14

Guruparan Giritharan

15,660
4
27
50

wow man yeah it worked!!, this whole time was because of this simple issue (I feel so stupid) :( Thank you very much friend :) – Muhammad Haekal Nov 05 '20 at 09:24

score 0 · Answer 2 · answered Nov 04 '20 at 12:41

First, make sure you use the icons correctly.

For example, suppose we use MaterialCommunityIcons.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="settings" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
    Tab.Navigator>
  );
}

General usage is like this. Check the document for details. https://reactnavigation.org/docs/bottom-tab-navigator/

score 0 · Answer 3 · answered Aug 28 '21 at 05:57

In my case I hadn't added

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

to the android/app/build.gradle as indicated in the [Oblador React Native Vector Icons README document][1] [1]: https://github.com/oblador/react-native-vector-icons#android

Once I added that, my icons displayed.

score -2 · Answer 4 · answered Nov 04 '20 at 12:37

-2

You need to create a custom tab bar component, and add the icons there. React Navigation has a pretty good documentation - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar

answered Nov 04 '20 at 12:37

Andrew

18
5

React Native Vector Icons won't show in Bottom Tab Navigation in Android

4 Answers4