TypeError: No "routes" found in navigation state

Question

I am using createMaterialTopTabNavigator from react-navigation in which i have two separate screens UpdatesStack and ShopsStack and i want to navigate to other screen from these screens so i written like <Toptab navigation={this.props.navigation} /> and it showing me following red screen error.

And if i write like <Toptab /> then there is no error but i am not able to navigate.

so how can i solve this problem and able to navigate.

code

class Parenthome extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <ToolbarAndroid
          style={styles.toolbar}
          title="Toolbar"
          titleColor="#ff6600"
        />

        <Toptab navigation={this.props.navigation} />
      </View>
    );
  }
}

const UpdatesStack = createStackNavigator(
  {
    Updates: { screen: Home }
  },
  {
    initialRouteName: "Updates"
  }
);

const ShopsStack = createStackNavigator(
  {
    Shops: { screen: Conshop }
  },
  {
    initialRouteName: "Shops"
  }
);

const Toptab = createMaterialTopTabNavigator({
  Updatestab: { screen: UpdatesStack },
  Shopstab: { screen: ShopsStack }
});

export default Parenthome;

Answer 1

I know it's late but just to answer for those who stumble on this from Search Engines:

1. Why don't you export default TopTab itself. There seems no need to wrap TopTab with ParentTheme component in your use case. You can style the TopTab navigator itself and render it like any other component.

2. If you must wrap the TopTab you need to have the router from the TopTab accessible, in addition to the navigation prop. This way they both refer to the same router. Simply put, add in ParentTheme:

static router = TopTab.router;

Check out Custom Navigators for more info. https://reactnavigation.org/docs/en/custom-navigators.html