0

I have created a Drawer Navigation with Home and Cart menu

enter image description here

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

enter image description here

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

enter image description here

how to do like this, please help

Thanks in advance

Surya
  • 265
  • 1
  • 3
  • 10

1 Answers1

0
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.

Nimesh Bhalani
  • 147
  • 9
  • Thanks for the solution Nimesh, am facing one more problem if i touch overlayed area in drawer navigation its not getting closed. Do u know any solution for that – Surya Dec 13 '19 at 13:49