React Navigation, launch screen outside drawer navigator

Question

I have a nested Stacks in my Drawer:

const routes = {
    Home: {
        screen: withHeader(HomeScreen, "Home", BasicHeader)
    },
    ...
    VideoPlayer: {
        screen: VideoPlayerScreen
    },
    TestYourself: {
        screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
    },
    MyResults: {
        screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
    },
    ...
};

const AppNavigator = createDrawerNavigator(routes, config);

How can I open a screen outside of my drawer navigator?

I would like to open my VideoPlayer screen in a Stack rather than a Drawer, as the Drawer stops my React-native-youtube component from playing.

Any ideas?

Answer 1

If you nest your DrawerNavigator in your StackNavigator, you can open your VideoPlayerScreen outside of your DrawerNavigator.

Answer 2

You can use drawerlockmode, in constructor of VideoPlayer you can set it to locked-closed and in componentWillUnmount() set it back to unlocked