CODEWITHSUNDEEP
iosreact-nativereact-navigation
KEERTHI j
KEERTHI j

Reputation: 250

not able to add image to tab bar item react navigation

# i am trying to add image to tab bar item but not able to load in react navigation #

## i am referring https://github.com/react-navigation/react-navigation/issues/1205#issuecomment-296708338 ##

import React from 'react';
import { Text, View, Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import ScreenOne from './ScreenOne';
import Screentwo from './Screentwo';
import Preferences from './Preferences';




const TabNavigator = createBottomTabNavigator(
  {
  Home: {
    screen : ScreenOne,
    navigationOptions: {
      showLabel: false,
      tabBarIcon: <Image style={{ width: 30, height: 30 }} source={require('../images/Help_Header_Icon.png'
      )}/>,
      showIcon: true,
      activeTintColor: '#00000',
      inactiveTintColor: '#000000'
    }
  },
  Settings: Screentwo,
  Preference: Preferences
},
{  
  initialRouteName: "Home"
}
);


export default createAppContainer(TabNavigator);

### expecting to show image in tab bar item and hide tab bar label###

Upvotes: 3

Views: 1586

Answers (2)

hong developer
hong developer

Reputation: 13926

tabBarIcon

React Element or a function that given { focused: boolean, horizontal: boolean, tintColor: string } returns a React.Node, to display in the tab bar. horizontal is true when the device is in landscape and false when portrait. The icon is re-rendered whenever the device orientation changes.

Usage

 {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor, image }) => {
        const { routeName } = navigation.state;
        let imagepath;
        if (routeName === "Home") {
          imagepath = require('../images/Help_Header_Icon.png');
        } else if (routeName === "Settings") {
          imagepath = require('../images/Settings.png');
        } else if (routeName === "Preference") {
          imagepath = require('../images/Preference.png');
        }
        return (
          <Image
            style={{ width: 30, height: 30, resizeMode: "stretch" }}
            source={imagepath}
          />
        );

Upvotes: 1

Harsh Vaid
Harsh Vaid

Reputation: 189

Please use Nativebase https://docs.nativebase.io/Components.html#footer-tabs-icon-headref

import { Container, Header, Content, Footer, FooterTab, Button, Icon } from 'native-base';

<Footer>
      <FooterTab>
        <Button>
          <Icon name="apps" />
        </Button>
        <Button>
          <Icon name="camera" />
        </Button>
        <Button active>
          <Icon active name="navigate" />
        </Button>
        <Button>
          <Icon name="person" />
        </Button>
      </FooterTab>
    </Footer>

Upvotes: 1

Related Questions