nativescript-vue / nativescript-vue-navigator

A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
MIT License
98 stars 10 forks source link

Android frameStack empty on some devices #95

Open ScottAtRedHawk opened 3 years ago

ScottAtRedHawk commented 3 years ago

Hi, I've come across and issue where the frameStack is empty on some Android devices. I'm not sure if this an issue for nativescript-vue-navigator or nativescript-vue or neither and something else is in my code is causing this issue. But I'll explain anyway and hopefully it'll help others at least.

Starting here https://github.com/nativescript-vue/nativescript-vue-navigator/blob/5f80c730eb81f59e0597e2bce53279abcf859610/index.js#L73-L74

When this.$navigate is called we go into its definition at https://github.com/nativescript-vue/nativescript-vue/blob/c0e6f959096e81dd544cee01f8be4cebfd89eb87/platform/nativescript/plugins/navigator-plugin.js#L69.

On line 77 (https://github.com/nativescript-vue/nativescript-vue/blob/c0e6f959096e81dd544cee01f8be4cebfd89eb87/platform/nativescript/plugins/navigator-plugin.js#L77), we call getFrameInstance. Then go to its definition at https://github.com/nativescript-vue/nativescript-vue/blob/c0e6f959096e81dd544cee01f8be4cebfd89eb87/platform/nativescript/plugins/navigator-plugin.js#L37.

On line 32 (https://github.com/nativescript-vue/nativescript-vue/blob/c0e6f959096e81dd544cee01f8be4cebfd89eb87/platform/nativescript/plugins/navigator-plugin.js#L32), when the result of require('@nativescript/core').Frame.getFrameById(frame) is undefined, causing undefined to be assigned to the frame variable.

The later call involving frame.id (https://github.com/nativescript-vue/nativescript-vue/blob/c0e6f959096e81dd544cee01f8be4cebfd89eb87/platform/nativescript/plugins/navigator-plugin.js#L37) throws an error Cannot read property 'id' of undefined and causes the navigation to never work.

Work around:

/// navigation.mixin.js
import { isAndroid } from '@nativescript/core';
import Vue, { navigateTo, NavigationEntryVue } from 'nativescript-vue';
import Component from 'vue-class-component';

@Component
export default class NavigationMixin extends Vue {
  public $navigator_navigate_override(
    route: string,
    options: NavigationEntryVue
  ): navigateTo {
    if (isAndroid) {
      // HACK: Android is broken on some devices
      options = {
        ...options,
        frame: {
          nativeView: {
            id: options.frame || 'navigator'
          }
        }
      };
    }

    return this.$navigator.navigate(route, {
      ...options
    });
  }
}

Which will get around frame.id being undefined when the navigator frame should always be defined when using the nativescript-vue-navigator plugin.

Possibly associated to: