Add documentation for single file nested navigation structures

[Laurensdc]

A navigation structure as described below works beautifully but isn't documented anywhere.
It allows you to navigate from nested screens to other nested screens easily, without having to pass navigation props from one screen to another.

I feel like such an example should be documented, since it's been discussed in various issues:
react-navigation/react-navigation#1979
react-navigation/react-navigation#983
react-navigation/react-navigation#913
react-navigation/react-navigation#335
react-navigation/react-navigation#1127

and more...

export const AppNavigator = StackNavigator(
    {
        Login: {
            screen: LoginScreen,
        },
        SetPassword: {
            screen: SetPasswordScreen,
        },

        mainFlow: {
            screen: TabNavigator(
                {
                    overviewFlow: {
                        screen: StackNavigator(
                            {
                                Overview: {
                                    screen: OverviewScreen,
                                },
                                DietitianInfo: {
                                    screen: DietitianInfoScreen,
                                },
                            },
                            {
                                headerMode: 'none',
                            }
                        )
                    },
                    Goals: {
                        screen: GoalsScreen,
                    },
                    diaryFlow: {
                        screen: StackNavigator(
                            {
                                DiaryOverview: {
                                    screen: DiaryOverviewScreen,
                                },
                                DiaryEntry: {
                                    screen: DiaryEntryScreen,
                                },
                            },
                            {
                                headerMode: 'none',
                            }
                        )
                    },

                    Notes: {
                        screen: NotesScreen,
                    },
                },
                {
                    tabBarPosition: 'bottom',
                    navigationOptions: ({ navigation }) => ({
                        // ...                         
                    }),
                    tabBarOptions: {
                       // ...
                    },
                }
            )
        }
    },
    {
        headerMode: 'none',
        // onTransitionStart: (e) => {
        //     console.log('Navigating somewhere');
        //     console.log(e);
        // },
    }
);

[devika7]

Hi @Laurensdc, thanks so much for the above code. I am wondering if it would hold same for react-navigation 3.x.x. I used something similar like yours, and getting this error.

error: "The navigation props is missing for this navigator. in react navigation 3, you need to set up your app container directly. "

I know I need to use CreateAppContainer function somewhere to solve this. Could you please guide me? This is my TestNav file

#TestNav.js

import Portfolio from "./Portfolio";
import SignupScreen from "./SignupScreen";
import ResetPassScreen from "./ResetPassScreen";
import WelcomeScreen from "./WelcomeScreen";
import Logout from "./Logout";
import Investments from "./Investments";
import Profile from "./Profile";
import LoginScreen from "./LoginScreen";
import {createStackNavigator, createBottomTabNavigator } from 'react-navigation';

export const TestNav = createStackNavigator(
    {
        Login: {
            screen: WelcomeScreen,
            screen: LoginScreen,
        },
        Signup: {
            screen: SignupScreen,
            screen: Logout,
        },
        Reset: {
            screen:ResetPassScreen
        },

        mainTabNavigator: {
            screen: createBottomTabNavigator(
                {
                    HomeStack: {
                        screen: createStackNavigator(
                            {
                                Overview: {
                                    screen: Portfolio,
                                },
                               
                            },
                            {
                                headerMode: 'none',
                            }
                        )
                    },
                    LinkStack: {
                       
                        screen: createStackNavigator(
                            {
                               Investments: {
                                    screen: Investments,
                                },
                                
                            },
                            {
                                headerMode: 'none',
                            }
                        )
                    },

                    SettingStack: {
                        screen: Profile,
                    },
                },
                {
                    //tabBarPosition: 'bottom',
                    navigationOptions: ({ navigation }) => ({
                        // ...                         
                    }),
                    tabBarOptions: {
                       // ...
                    },
                }
            )
        }
    },
    {
        headerMode: 'none',
        // onTransitionStart: (e) => {
        //     console.log('Navigating somewhere');
        //     console.log(e);
        // },
    }
);

export default TestNav;