Using redux-connected component as screen in StackNavigator

Question

I'm creating an react native app using create-react-native-app, react-navigation and react-redux. I'm trying to add a redux-connected component as a screen into a nested StackNavigator (though the nesting seems to not make a difference, it doesn't work either way) and consistently am getting an error message saying Route 'MilkStash' should declare a screen. When I remove the redux connection from the MilkStash.js file, everything works fine. Any idea how to get this working?

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './src/reducers';
import AppWithNavigation  from './src/AppWithNavigation';

export default () => (
  <Provider store = {createStore(rootReducer)}>
    <AppWithNavigation />
  </Provider>
);

AppWithNavigation.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
import MilkStash from './screens'
import { StatsScreen, FAQScreen, AddMilk, AccountScreen } from './screens';

export default class AppWithNavigation extends React.Component {

  render() {
    return (
        <MenuNavigator />
    );
  }
}

const MilkNavigator = StackNavigator(
  { Milk: { screen: MilkStash},
    AddMilk: { screen: AddMilk }
  },
);

const AccountNavigator = StackNavigator(
  { Account: {screen: AccountScreen}}
);

const StatsNavigator = StackNavigator(
  { Stats: {screen: StatsScreen }}
);

const FAQNavigator = StackNavigator(
  { FAQ: {screen: FAQScreen}}
)

const MenuNavigator = DrawerNavigator({
    Milk: { screen: MilkNavigator},
    Account: {screen: AccountNavigator},
    Stats: {screen: StatsNavigator},
    FAQ: {screen: FAQNavigator},
  }
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  }
});

MilkStash.js

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { connect } from 'react-redux';
import { Milk } from '../../core/models/milk';
import styles from './styles.js';

export class MilkStash extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
          ....displaying data goes here
      </View>
    )
  }
}

function mapStateToProps(state){
  return{
    milkStash: state.milkStash
  }
}

function mapDispatchToProps(dispatch){
  return {
    addMilk: (milk) => dispatch(addMilk(milk)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MilkStash);

milk-reducer.js

import {ADD_MILK} from '../constants';

const milkReducer = (state = {milkStash: []}, action = {}) => {
  switch(action.type){
    case ADD_MILK:
      var item = action.payload;
        return state
        .update('milkStash', (milkStash) => 
            {
                var milkStashCopy = JSON.parse(JSON.stringify(milkStash));
                milkStashCopy.concat(item);
                return milkStashCopy;

            });
    default:
        return state;
    }
}
export default milkReducer;

reducers.js

export * from './milk.js';

import milkReducer from './milk';
import { combineReducers } from 'redux';

export default rootReducer = combineReducers({
    milk: milkReducer
});

Answer 1

I figured out the answer and thought I would help prevent someone else struggling with this for 3 days. The issue had to do with the way I was importing the exports from MilkStash.js. Apparently using import MilkStash from './screens' will cause the error but changing it to import MilkStashContainer from './screens/MilkStash/MilkStash.js will fix the problem.