Vue Native Drawer Navigation

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>