Hello Programmers,

I have some issue with React Navigation, I'm using createBottomTabNavigator to do Tab Navigator, but the icon it does not appear! and then replace the icon with the image it's work correctly and it's not the issue with the react native vector icon because I use them in other screen and it's work,

Version

"react-native-vector-icons": "^6.1.0"

"react-navigation": "^3.0.8"

Screen

Other Screen to use the RN vector Icon

My Code

import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";

import Search from "./src/screen/Search";
import Home from "./src/screen/Home";
import Locations from "./src/screen/Locations";

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("./assets/rainy.png")}
            style={{ width: 26, height: 26, tintColor: tintColor }}
          />
        )
      }
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: "Search",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-search" size={25} color="#4F8EF7" />;
        }
      }
    },
    Locations: {
      screen: Locations,
      navigationOptions: {
        tabBarLabel: "Location",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-map" size={25} color="#4F8EF7" />;
        }
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#e91e63",
      showIcon: true,
      showLabel: true,
      labelStyle: {
        fontSize: 14
      },
      style: {}
    },
    navigationOptions: {
      tabVisiable: true,
      activeTintColor: "red",
      animationEnabled: true
    }
  }
);

export default createAppContainer(TabNavigator);

Hello Programmers,

I have some issue with React Navigation, I'm using createBottomTabNavigator to do Tab Navigator, but the icon it does not appear! and then replace the icon with the image it's work correctly and it's not the issue with the react native vector icon because I use them in other screen and it's work,

Version

"react-native-vector-icons": "^6.1.0"

"react-navigation": "^3.0.8"

Screen

Other Screen to use the RN vector Icon

My Code

import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";

import Search from "./src/screen/Search";
import Home from "./src/screen/Home";
import Locations from "./src/screen/Locations";

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("./assets/rainy.png")}
            style={{ width: 26, height: 26, tintColor: tintColor }}
          />
        )
      }
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: "Search",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-search" size={25} color="#4F8EF7" />;
        }
      }
    },
    Locations: {
      screen: Locations,
      navigationOptions: {
        tabBarLabel: "Location",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-map" size={25} color="#4F8EF7" />;
        }
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#e91e63",
      showIcon: true,
      showLabel: true,
      labelStyle: {
        fontSize: 14
      },
      style: {}
    },
    navigationOptions: {
      tabVisiable: true,
      activeTintColor: "red",
      animationEnabled: true
    }
  }
);

export default createAppContainer(TabNavigator);

• javascript
• android
• reactjs
• react-native
• react-redux

• 1 NOW it's Work :D, I just Add return :D tabBarIcon: () => { return <Icon size={20} name="ios-map" color={"red"} />; } – user8831512 Commented Dec 20, 2018 at 21:28
• oh! I had not seen this, also instead of braces put parentheses in this function to say that you are returning a JSX tabBarIcon: ({ tintColor }) => ( <Icon name="ios-search" size={25} color="#4F8EF7" />; ) – Brayan Salazar Commented Dec 20, 2018 at 21:39
• @BrayanSalazar I'm really doing as JSX but it does not work just the return showing the icon, I don't know why! – user8831512 Commented Dec 20, 2018 at 21:45
• What I was saying is that the first icon worked because it didn't have a return and it was in (). and the other two were between {} then it was a function and that's because you have put a return. – Brayan Salazar Commented Dec 20, 2018 at 21:53
• Oh, that's right thank you man for explaining :D – user8831512 Commented Dec 20, 2018 at 21:58

2 Answers 2

you can use MaterialCommunityIcons like this :

import { MaterialCommunityIcons } from 'react-native-vector-icons';

<Tab.Screen
    name="Feed"
    ponent={Feed}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="home" color={color} size={size} />
      ),
    }}
  />

You can find more info here : https://reactnavigation/docs/bottom-tab-navigator/

you can try define the icon in navigationOptions this is docs example

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any ponent that you like here! We usually use an
        // icon ponent from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

with routeName you can put the icon

   if (routeName === 'Home') {
     return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
   }