1

My app uses a TabNavigator in which I want to show a badge next to one of the tab icons based on a value in my Redux store. Because I store the routerConfiguration of the TabNavigator in a separate file the idea was to import the store, add a listener and use the value I want in my configuration. However, no matter in which module I try to import my store for a second time I get an error that causes my TabBar to become undefined (?!)

I've tried to remove any unnecessary code, but I simply can't see what's going wrong here.

My basic file structure is as follows (reduced for readability)

.
├── app.js
├── store.js
├── components
│   └── TabIcon.js
└── navigators
    ├── TabBarNavigation.js
    └── TabBarNavigationConfiguration.js

app.js

import React from 'react';
import { AppRegistry } from 'react-native'
import { Provider } from 'react-redux'
import TabBarNavigation from './navigators/TabBarNavigation'

import store from './store'

class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
        <TabBarNavigation />
      </Provider>
    );
  }
}

AppRegistry.registerComponent('testapp', () => App);

TabBarNavigation

import React from 'react';

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

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

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

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

export default connect(mapStateToProps)(TabBarNavigation)

TabBarNavigationConfiguration

import React from 'react'
import { TabNavigator } from 'react-navigation'

// Tab-navigators
import GiveFeedbackNavigation from './GiveFeedbackNavigation'
import ViewFeedbackNavigation from './ViewFeedbackNavigation'

import TabIcon from '../components/TabIcon'
//import store from '../store'

store.subscribe(listener)

var newFeedbackCount

listener = () => {
    newFeedbackCount = store.getState().feedback.newFeedbackCount
}

const routeConfiguration = {
    // ...tab 1

    // ...tab 2
    ViewFeedbackNavigation: { 
        screen: ViewFeedbackNavigation,
        navigationOptions: {
            tabBarLabel: 'View Feedback',
            tabBarIcon: ({ tintColor, focused }) => (
                <TabIcon
                    icon={focused ? 'comments' : 'comments-o'}
                    size={24}
                    color={tintColor}
                    count={newFeedbackCount} // value from Redux store
                />
            ),
        },
    },
}


const tabBarConfiguration = {
    //...
}

export const TabBar = TabNavigator( routeConfiguration, tabBarConfiguration )

store

// Redux
import { createStore } from 'redux'
import reducer from './reducers'

export default createStore(
    reducer,
    undefined, // initial state
    undefined, // middleware
)

Pretty straight forward I believe, and working. However, the moment I uncomment //import store from '../store' from TabBarNavigationConfiguration , the export const TabBar from the same file will be undefined causing havoc later down the line.

What confuses me even more is that if I try to import the store from any other module e.g. TabIcon, I get the same error (TabBar undefined).

Any ideas what might cause this and how to solve this besides combining TabBarNavigation & TabBarNavigationConfiguration into a single module and then reading the store using mapStateToProps? I'd like to keep the files separated.

For what it's worth, I'm using: react@16.0.0-alpha.6 react-navigation@1.0.0-beta.9 react-redux@5.0.4

Thanks in advance.

ixje
  • 360
  • 1
  • 3
  • 20
  • Instead of importing `store`, (which would be creating a new store everytime based on your code) in configuration, import `connect` from `react-redux` the same way you have tabnavigation and wrap `TabBar` with it. no need to combine any files – azium May 28 '17 at 21:11
  • using `connect` on TabBar won't give me access to the state while declaring `routeConfiguration` where I need it. Others seems to be able to do it fine if I believe this https://stackoverflow.com/a/41172768/3869515 – ixje May 29 '17 at 04:51

0 Answers0