CODEWITHSUNDEEP
reactjsreact-native
Viktor
Viktor

Reputation: 326

undefined custom icon react-navigation

I'm trying to add my own icons into a navigation bar(type react-navigation). When I return the IconComponent i get 

undefined is not a function (near '..._reactNative.default.createElement...')

I've tried using Ionicons own icons but I get the same error. I've thought about if IconComponent requires some other input but I haven't found anything useful. How i'm implementing at the moment: 

import React from 'react-native'
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import ListView from '../views/ListView';
import SettingsView from '../views/SettingsView'
import NearbyView from '../views/NearbyView'
import list from '../assets/icons/list.png'
import nearby from '../assets/icons/nearby.png'
import settings from '../assets/icons/settings.png'
import Ionicons from 'react-native-vector-icons/Ionicons';

const TabNavigator = createBottomTabNavigator({
    List: { screen: ListView },
    Nearby: { screen: NearbyView },
    Settings: { screen: SettingsView },
  }, { 
      defaultNavigationOptions: ({navigation}) => ({
          tabBarIcon: ({ tintColor }) => {
              const routeName = navigation.state
              let IconComponent = Ionicons;
              let iconName;
              if(routeName === 'List') {
                iconName = list;
              }
              else if(routeName === 'Nearby') {
                iconName = nearby;
              }
              else if(routeName === 'Settings') {
                iconName = settings;
              }

              return <IconComponent name={iconName} size={25} color={tintColor} />;
          }
      }),
      tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
      },
  });

  export default createAppContainer(TabNavigator);

Upvotes: 1

Views: 532

Answers (2)

Ammar Tariq
Ammar Tariq

Reputation: 847

Problem is with your routeName

you wrote const routeName = navigation.state

instead of

const { routeName } = navigation.state

You also need to correct your imports

import React from 'react'

and in class delaration

export default class className extends React.Component{}

Upvotes: 0

hong developer
hong developer

Reputation: 13926

I think you probably need to fix your imports. The path is not valid.

proper import route:

import React from 'react';
import ReactNative from 'react-native';

Upvotes: 2

Related Questions