CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativereact-redux
user8831512
user8831512

Reputation:

How to Show Icon on TabNavigator in react native

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

Home

Other Screen to use the RN vector Icon

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);

Upvotes: 4

Views: 6234

Answers (2)

Dessuane
Dessuane

Reputation: 85

you can use MaterialCommunityIcons like this :

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

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

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

Upvotes: 4

Brayan Salazar
Brayan Salazar

Reputation: 334

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 component that you like here! We usually use an
        // icon component 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} />;
   }

Upvotes: 1

Related Questions