Vue Native Drawer Navigation - react-native

Question

Edited: Vue Native has been deprecated. So no need to answer it now
When I am using Drawer Navigator with different screens it is working fine there are 2 issues that I cannot set titles for specific screens and other is when I am on 4th screen and press back it takes me back to the home screen what supposed to do any working example that I can see?
<template>
<app-navigator></app-navigator>
</template>
<script>
import {
createAppContainer,
createStackNavigator,
createDrawerNavigator,
} from 'vue-native-router';
import Vue from 'vue-native-core';
import {VueNativeBase} from 'native-base';
Vue.use(VueNativeBase);
import LoginScreen from './screens/Login.vue';
import TenantScreen from './screens/TenantDetails.vue';
import InvoiceScreen from './screens/TenantInvoices.vue';
import PaymentScreen from './screens/PaymentHistory.vue';
import Sidebar from './screens/Sidebar/index.vue';
import React from 'react';
import {Text, View} from 'react-native';
import {DrawerItems} from 'react-navigation-drawer';
import {DrawerNavigation} from 'react-navigation';
const DrawerContent = (props) => (
<View>
<View
style={{
backgroundColor: '#224356',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{color: 'white', fontSize: 30}}>Header</Text>
</View>
<DrawerItems {...props} />
</View>
);
const DrawerNavigator = createDrawerNavigator(
{
Login: LoginScreen,
TenantDetails: TenantScreen,
TenantInvoices: InvoiceScreen,
PaymentHistory: PaymentScreen,
},
{
initialRouteName: 'Login',
contentComponent: Sidebar,
contentOptions: {
activeTintColor: '#000000',
activeBackgroundColor: '#e6e6e6',
},
itemsContainerStyle: {
marginTop: 55,
},
},
);
const StackNavigator = createStackNavigator(
{
Drawer: DrawerNavigator,
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login',
},
},
TenantDetails: {
screen: TenantScreen,
navigationOptions: {
headerTitle: 'Tenant Details',
},
},
TenantInvoices: {
screen: InvoiceScreen,
navigationOptions: {
headerTitle: 'Tenant Invoices',
},
},
PaymentHistory: {
screen: PaymentScreen,
navigationOptions: {
headerTitle: 'Payment History',
},
},
},
{
headerMode: 'none',
},
);
const AppNavigator = createAppContainer(StackNavigator);
export default {
components: {AppNavigator},
};
</script>