React-native drawer/side menu issue

Question

I have this code structure in my project -

    const HomeScreenRouter = DrawerNavigator(
      {

        AppTabNavigator: { screen: AppTabNavigator },
        LogOutScreen: { screen: LogOutScreen }
      },
      {
        contentComponent: props => <SideBar {...props} />,
        drawerWidth: Dimensions.get('window').width-30,
        drawerPosition: "right",
      }
    );

const MenuImage = ({navigation}) => {
  if(!navigation.state.isDrawerOpen){
      return <Image source={require('../images/menu-button.png')}/>
  }else{
      return <Image source={require('../images/left-arrow.png')}/>
  }
}


const AppStackNavigator = createStackNavigator({


  DrawerNavigator:{
      screen: HomeScreenRouter
  },


},{
  navigationOptions: ({ navigation }) => ({

      headerRight: 
      <TouchableOpacity  onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
            <MenuImage style="styles.bar" navigation={navigation}/>
        </TouchableOpacity>,
      headerStyle: {
          backgroundColor: '#333',
      },


      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },

  })
});

export default AppStackNavigator;

In every tab screen I want common side menu. I have achieved such thing doing above. But my problem is when I navigate to tab detail screen(by clicking on button inside tab screen) there is back button visible nested stack. But instead of this I want back button in parent (common header/menu). Please let me know how I can achieve this.