React-navigation TabNavigator with redux errors

Question

I'm trying to implement the TabNavigator of react-navigation with redux but I keep running into errors. I'm now getting the following error: undefined is not an object (evaluating 'navigation.state.routes')

My index.android.js and index.ios.js are all pointed to my app.js.

I've created the following classes:

NavigationConfiguration

import {
  TabNavigator
} from 'react-navigation';

// Default colors class
import colors from '../config/colors';

// Tab-Navigators
import MapScreen from '../screens/MapScreen';
import ScanScreen from '../screens/ScanScreen';
import HomeScreen from '../screens/HomeScreen';
import HistoryScreen from '../screens/HistoryScreen';
import LanguageSelectScreen from '../screens/LanguageSelectScreen';

const routeConfiguration = {
  Home:           { screen: HomeScreen },
  LanguageSelect: { screen: LanguageSelectScreen },
  History:        { screen: HistoryScreen },
  Map:            { screen: MapScreen },
  Scan:           { screen: ScanScreen },
}

const tabBarConfiguration = {
  swipeEnabled: false,
  animationEnabled: true,
  tabBarOptions: {
    showLabel: false,
    showIcon: true,
    inactiveTintColor: colors.grey2,
    activeTintColor: colors.selectedTabColor,
  }
}

export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)

export const tabBarReducer = (state,action) => {
  if (action.type === 'JUMP_TO_TAB') {
    return { ...state, index:0 }
  } else {
    return TabBar.router.getStateForAction(action,state)
  }
}

TabBarComponent

// React
import React, { Component } from 'react';

// Navigation
import { addNavigationHelpers } from 'react-navigation'
import { TabBar } from '../navigation/NavigationConfiguration'

//Redux
import { connect } from 'react-redux'

const mapStateToProps = (state) => {
 return {
   navigationState: state.Home,
  }
}

class TabBarComponent extends Component {
  render() {
    return (
      <TabBar
        navigation={
        addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.navigationState,
        })
      }
      />
    )
  }
}

export default connect(mapStateToProps)(TabBarComponent)

Store

// Redux
import { applyMiddleware, combineReducers, createStore } from 'redux'
import logger from 'redux-logger'

// Navigation
import { TabBar, tabBarReducer } from '../navigation/NavigationConfiguration';

const middleWare = () => {
  return applyMiddleware(logger);
}

export default createStore(
  combineReducers({
    tabBar: tabBarReducer,
  }),
  middleWare(),
)

HomeScreen

// React
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';

class HomeScreen extends Component {
  static navigationOptions = {
    tabBar: {
      label: 'Home',
      icon: ({ tintColor }) => (
        <MaterialIcons color={tintColor} name='home' size={26} />
      ),
    },
  }

  constructor(props) {
    super(props);
  }

  render(){
    return (
      <View>
      </View>
    )
  }
}

export default HomeScreen;

app.js

// React
import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';

// Redux
import { Provider } from 'react-redux';
import store from './config/store';

// Navigation
import TabBarComponent from './components/TabBarComponent';

class GeoFort extends Component {
  render() {
    return (
      <Provider store={store}>
        <TabBarComponent />
      </Provider>
    )
  }
}

AppRegistry.registerComponent('GeoFort', () => GeoFort);

Answer 1

I finally figured it out! In the TabBarComponent I changed the mapStateToProps to:

const mapStateToProps = (state) => {
 return {
   navigationState: state.tabBar,
  }
}