React native doesnt recognize navigation object when using TabNavigator

0
votes

Im new to React Native so I apologize for ignorance.

See code below.....when it gets to const { routeName } = navigation.state; ....it gives error [TypeError: Cannot read property 'routeName' of undefined].

I can see the navigation object contains a "state" object....and that this object contains a routeName key (named "Search")....so why doesnt it recognize.

Thanks for help

import React, { Component } from 'react';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import { Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Search from '../screens/Search';
import Profile from '../screens/Profile';


export const Tabs = TabNavigator(
{
  Search: {
    screen: Search,
    navigationOptions:{
        tabBarLabel:'Search'
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions:{
        tabBarLabel:'Me'
    },
  }
}, //end of 1st object/arg passed to TabNavigator
{
  navigationOptions: ( navigation ) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      if(routeName === 'Search'){
        iconName = "ios-information-circle" + (focused ? "" : "-outline");
      } else if (routeName === 'Profile') {
        iconName = "ios-options" + (focused ? "" : "-outline");
      }

  return <Ionicons name={iconName} size = {25} color = {tintColor} />;
    }, //end tabBarIcon
  }), //end navigationOptions

  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray'
  },

  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false

} //end 2nd arg/object passed to TabNavigator
); //end TabNavigator
1
react-native

1 Answers

1
votes

Figured it out.....was missing curly brackets around the navigation argument passed to navigationOptions. Newby mistake :)