TabNavigator customize icon error in react-native

Question

I'm using Xcode 10 & latest react-native version. I created StackNavigator app with TabNavigator.

Code: navigation.js Class

import React from "react";
import { TabNavigator, StyleSheet, Text, View, Image} from "react-navigation";

import Dashboard from '.././Screen/Dashboard'
import Home from '.././Screen/Home'
import Events from '.././Screen/Events'
import Settings from '.././Screen/Settings'


export default Tab = TabNavigator({
  Home: {
    screen: Home,
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
          tabBarLabel: 'Settings',
          tabBarIcon: ({ tintColor }) => (
            <Image source={require('.././assets/setting.png')}
            style= {{width:15, height:15, tintColor:'black'}}>
            </Image>
        )
    },
  },
  Events: {
    screen: Events,
    },
  }, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: "#2EC4B6",
    inactiveTintColor: '#666',
    labelStyle: {
      fontSize: 16,
      padding:4,
    }
  }
});

But i got error here,

[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TabBarIcon.

If i remove this line:

tabBarIcon: ({ tintColor }) => (
                <Image source={require('.././assets/setting.jpeg')}
                style= {{width:15, height:15, tintColor:'black'}}>
                </Image>
            )

then its working perfectly without icon. i searched everything but don't find solution.

Muneer PP Muneer PP · Accepted Answer · 2018-10-27T20:32:29

Please try this ( assuming u r creating a bottom navigator and you have latest react navigation )

import { createBottomTabNavigator } from 'react-navigation';

export default createBottomTabNavigator({
  Home: {
    screen: Home,
  },
  Settings: {
    screen: Settings,
    navigationOptions: {
          tabBarLabel: 'Settings',
          tabBarIcon: ({ tintColor }) => (
            <Image source={require('.././assets/setting.png')}
            style= {{width:15, height:15, tintColor:'black'}}>
            </Image>
        )
    },
  },
  Events: {
    screen: Events,
    },
  }, {
  tabBarPosition: 'bottom',
  swipeEnabled: true,
  tabBarOptions: {
    showIcon: true,
    activeTintColor: '#f2f2f2',
    activeBackgroundColor: "#2EC4B6",
    inactiveTintColor: '#666',
    labelStyle: {
      fontSize: 16,
      padding:4,
    }
  }
});

TabNavigator customize icon error in react-native

1 Answers