reactjs - IOS problem with Invariant Violation: The navigation prop is missing for this navigator after updating React Navigation to 4.0

Question

I read all posts in stackoverflow regarding this issue including this one

I am super confused and not sure where those changes should be made exactly. I tried the above solution without success. also my issue is only with IOS and started after updating to React Navigation 4.0

This error is located at:
    in Navigator (created by App)
    in Provider (created by Consumer)
    in Consumer (created by Provider)
    in Provider (at App.js:143)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

navigator look like this

OverviewStack.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { createStackNavigator } from 'react-navigation-stack'
.....


const OverviewStack = createStackNavigator(
  {
    ...OverviewRoutes,
  },
  {
    initialRouteName: "Overview",
    resetOnBlur: true,
    navigationOptions: ({ navigation }) => ({
      ...SharedHeader(navigation),
    }),
  }
);

export default class overviewStackWithStore extends Component {
  static router = OverviewStack.router;
  static propTypes = {
    navigation: PropTypes.object.isRequired,
  };

  render() {
    return (
      <Subscribe
        to={[
          ActivitiesContainer,
          AuthContainer,
          NotificationContainer,
          HomeInfoContainer,
        ]}
      >
        {(activityStore, authStore, notificationStore, homeStore) => (
          <OverviewStack
            navigation={this.props.navigation}
            screenProps={{
              currentUser: authStore.currentUser,
              activateNotifications: notificationStore.activateNotifications,
              notificationStore,
              store: activityStore,
              homeStore,
              auth: authStore,
            }}
          />
        )}
      </Subscribe>
    );
  }
}

then I have

import { createBottomTabNavigator } from "react-navigation-tabs";
import OverviewStack from "./overviewStack";
....
createBottomTabNavigator(
  {
    Overview: {
      resetOnBlur: true,
      screen: OverviewStack,
      navigationOptions: {
        title: "Home",
      },
    },

....
....

    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const icons = {
          Overview: "home-outline",
          ....
        };
.
.
.
const App = createAppContainer(createBottomTabNavigator);
export default App;

this example seems straight however I use createBottomTabNavigator and not createStackNavigator

Answer 1

have you tried this?

import OverviewStack from "./overviewStack";
....

    Overview: {
      resetOnBlur: true,
      screen: OverviewStack,
      navigationOptions: {
        title: "Home",
      },
    },

....
....

const    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const icons = {
          Overview: "home-outline",
        };

const App = createAppContainer(navigationOptions);

export default App;