Cannot Deep Link Into Nested React Native Navigators - reactjs

Question

I'm experiencing an issue with React Navigation 2.18.3. I cannot deep link to a route that belongs to a navigator that is nested. I have a top-level tab navigator, MainTabNavigator which has two routes, Home and Menu:
import React, { PureComponent } from 'react';
import { createMaterialTopTabNavigator } from 'react-navigation';
import Explore from '../Home/Home';
import Menu from '../Menu/Menu';
import { TabBarContainer as TabBar } from './TabBar';
class MainTabNavigator extends PureComponent {
getRoutes() {
return {
Explore: { screen: Explore },
Menu: { screen: Menu, path: 'menu' }
};
}
getOptions() {
return {
tabBarComponent: TabBar,
tabBarPosition: 'bottom',
swipeEnabled: false
};
}
render() {
const TabNavigator = createMaterialTopTabNavigator(
this.getRoutes(),
this.getOptions()
);
return (
<TabNavigator uriPrefix="myapp://" />
);
}
}
export default MainTabNavigator;
Menu itself is a stack navigator:
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import MenuPage from './MenuPage';
import Products from '../Products/Products';
import onNavigationStateChange from '../../util/onNavigationStateChange';
import Settings from './Settings/Settings';
class Menu extends Component {
getRoutes() {
return {
MenuPage: { screen: MenuPage, path: 'page' },
Products: { screen: Products, path: 'products' },
Settings: { screen: Settings }
};
}
getOptions() {
return {
initialRouteName: 'MenuPage',
headerMode: 'none',
cardStyle: { backgroundColor: '#fff' }
};
}
render() {
const Navigation = createStackNavigator(this.getRoutes(), this.getOptions());
const screenProps = { rootNavigation: this.props.navigation };
return (
<Navigation
uriPrefix="myapp://menu"
screenProps={screenProps}
onNavigationStateChange={onNavigationStateChange}
/>
);
}
}
export default Menu;
When I go to safari and navigate to myapp://menu/products, the Menu navigator navigates correctly, but the MainTabNavigator stays stuck on Home. To the user, it looks like no navigation took place. If the user then navigates to the Menu, they will find that the Menu is already navigated to the Products page.
How can I get MainTabNavigator to navigate correctly when responding to a deep link?

Answer 1

To anyone experiencing a similar problem:
The issue was that we were explicitly rendering our Navigators. As it says in the "Common Mistakes" section of the docs:
Most apps should only ever render one navigator inside of a React component, and this is usually somewhere near the root component of your app. This is a little bit counter-intuitive at first but it's important for the architecture of React Navigation.
Apparently, failing to do so prevents you from being able to deep link all the way through your navigators ¯\_(ツ)_/¯