GeekyAnts / vue-native-router

37 stars 24 forks source link

Back Press Goes back to initial route #66

Open UsamaAltaf opened 3 years ago

UsamaAltaf commented 3 years ago

I am using this template and I have 4 screens.

When I am navigating through screens like A => B => C => D.

D is my last screen and when I press back from D screen it goes back to A screen.

I want is when press back from D screen then it should go to the C screen not A.

And yeah this issue is only when I am using Drawer Navigator.

If I remove Drawer Navigator back is working fine.

Here is my code if you want to take a look:


<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 SignUpScreen from './screens/SignUp.vue';
import Sidebar from './screens/Sidebar/index.vue';
import {DrawerNavigation} from 'react-navigation';

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(
  {
    DrawerNavigator,
    Login: LoginScreen,
    TenantDetails: TenantScreen,
    TenantInvoices: InvoiceScreen,
    PaymentHistory: PaymentScreen,
    SignUp: SignUpScreen,
  },
  {
    initialRouteName: 'DrawerNavigator',
    headerMode: 'none',
  },
);

const AppNavigator = createAppContainer(StackNavigator);
export default {
  components: {AppNavigator},
};
</script>
kamyasimon commented 3 years ago

Exactly because its supposed to take you back to the previous Stack, you need to identify the initial screen and the condition related to the screen displaying