Moving screens, screen visible underneath - reactjs

Question

When navigating from my VideoPlayer screen to a screen in my NestedDrawer, using this.props.navigation.navigate("TestYourself", { id }).
I briefly see the HomeScreen, underneath the screen I'm navigating too.
Is there anyway I can hide the HomeScreen underneath?
Home:{
screen: HomeScreen, // this is visible underneath
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
},
Drawer: {
screen: NestedDrawer, // navigate to screen in this stack
navigationOptions: ({ props }) => ({
header: () => null
})
},
VideoPlayer: {
screen: VideoPlayerScreen, //navigate from here
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
}
},
{
initialRouteName: "Home",
transparentCard: true
}
);
The yellow boxes and question text is from a screen in the NestedDrawer stack. The menu items behind it are on the HomeScreen. This lasts for about 3 seconds, then the screen behind disappears and it returns to normal:
AppNavigator:
const config = {
initialRouteName: "Home",
contentOptions: {
activeTintColor: "#e91e63",
itemStyle: {
flexDirection: "row-reverse"
}
},
drawerWidth: 300,
drawerPosition: "right"
};
const withHeader = (
screen: Function,
routeName: string,
Header
): StackNavigator =>
createStackNavigator(
{
[routeName]: {
screen,
navigationOptions: ({ routeName, props }) => ({
header: props => <Header {...props} />
})
}
},
{
transparentCard: true
}
);
const routes = {
.....
TestYourself: {
screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
},
....
Search: {
screen: withHeader(SearchScreen, "Search", DrawerHeader)
},
.....
};
const NestedDrawer = createDrawerNavigator(routes, config);
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
},
Drawer: {
screen: NestedDrawer;,
navigationOptions: ({ props }) => ({
header: () => null
})
},
VideoPlayer: {
screen: VideoPlayerScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
}
},
{
initialRouteName: "Home",
transparentCard: true
}
);
export default createAppContainer(MainStack);