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.