How to load another screen on top of Home screen when we click on icon in header in Drawer navigation in React-Native

Question

I have created a Drawer Navigation with Home and Cart menu

when i click on Cart symbol on header i want to open separate page on top of this home screen. I have written code like below

const DrawerNavigationCon=createDrawerNavigator({
  Home:HomeNavigation,
  Cart:CartNavigation
},{
 overlayColor:'gray',
 initialRouteName:'Home'
})

and i have written code to navigate from home to cart is like below

const CartNavigation = createStackNavigator({
  Cart:CartPage,
},
{
  defaultNavigationOptions:({navigation})=>{
    return{
      headerStyle:{
        backgroundColor:'rgb(28, 34, 36)'
      },
      headerTitle:'Cart',
      headerTintColor:'#fff',
      headerTitleStyle:{
        fontWeight:'bold',
        textAlign:'center',
        flex:1
      },
      headerLeft:(       
        <View>
        <Icons name="md-menu" style={{fontSize:35,color:'white',paddingLeft:10}} onPress={()=>navigation.openDrawer()} />
      </View>
      ),
      headerRight:(
        <View>
          <Icons name="md-cart" style={{fontSize:30,color:'white',paddingRight:10}} onPress={() => navigation.navigate('Cart')} />
        </View>
      )
    }
  }
})

you can see onPress={() => navigation.navigate('Cart')} in <Icons> Tag

when i click on Cart it's opening like below

But i want to load another page on top of Home page when i click cart like below

how to do like this, please help

Thanks in advance

Answer 1

const DrawerNavigationCon= createStackNavigator({
    Home:createDrawerNavigator({
       Home:HomeNavigation,
      },{
         overlayColor:'gray',
         initialRouteName:'Home'
      }),
    Cart:{
          screen : CartPage
        }
    })

Use your stack configuration as shown and configure your stack as per requirement You can get an idea from the above code.

Basically idea is to use stackNavigator as parent stack and put drawer navigator as child of that stackNavigator and put another route as parallel of that drawer navigator so you can now able to open another screen at top of drawer navigator.