Drawer as root element

[keerl]

I believe the often use-case for a drawer in an application is to have it at the top level, root element. That way it is available on every page, as well as having it display on top of the ActionBar.

This may be possible already somehow, but hasn't been tried? If so, all the demos should be updated to have this as stand behavior possibly?

[farfromrefug]

Not possible right now. Well not true you can: Page Drawer Frame ....Pages

[keerl]

Okay. Just another thing I wanted to add to the wish list and keep track of. I may also take a crack at this one eventually.

[farfromrefug]

Yes will be trickier though. Should look the pro ui plugin to see how they did that.

[vishnuraghavb]

I've been using the drawer as root element for a while now (with an issue) with NS-Vue

main.js

import Vue from "nativescript-vue"
import App from "./components/App"

import { install } from '@nativescript-community/ui-drawer'
install()

import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
Vue.use(DrawerPlugin)

new Vue({
  render: (h) => h("frame", [h(App)]),
}).$start()

App.vue

<Page actionBarHidden="true">
  <Drawer>
    <GridLayout ~leftDrawer>
      <Label text="My Content"/>
    </GridLayout>
    <Frame ~mainContent >
      <myComponent />
    </Frame>
  </Drawer>
</Page>

The issue is that Drawer component blocks page interaction after navigation. If navigating from Home -> Component2, Component2 may lose interactivity. If it doesn't then navigating back to Home will. But this only happens rarely.

[farfromrefug]

@vishnuraghavb it think it is because you navigate with the "top" frame. In your app there are 2 frames, the ones from main.js and the one within App.vue. if you dont navigate with the inner one you will loose drawer interaction. For that set an id for the inner frame and use it in Vue navigate options (it has a frame option).

[vishnuraghavb]

Actually, I'm already using the frame option, but, still the issue persists.

this.$navigateTo( Component2, { frame: "main-frame" } )

The interaction loss happens randomly.

Previously, I was using nativescript-ui-sidedrawer with no issue with the same setup. Recently made the switch to your awesome plug-in knowing that it is open-source.

[vishnuraghavb]

I'm not talking about the drawer interaction but the page interaction. Sometimes the page freezes ignoring taps.

[vishnuraghavb]

If I'm lucky, I will post a screen record describing the situation.

[vishnuraghavb]

And also don't know why edge swipe only works on emulator but not on real device ( tested with Redmi 4 and Zenfone 2 ). I've set gestureEnabled="true". Is there anything else needed to be set?

[farfromrefug]

@vishnuraghavb a sample would help yes. Gesture might not work on device because maybe the left region is too small. Which would make it easy to get with the mouse but not with the finger. Can you check what versions are install in node modules of @nativescript-community/ui-drawer && @nativescript-community/gesturehandler ?

[vishnuraghavb]

You are right. After increasing the leftSwipeDistance, the swipe action works on real devices as well! I have installed the latest one I guess,

@nativescript-community/gesturehandler - 0.1.36
@nativescript-community/ui-drawer - 0.0.22

I've figured out the issue that blocked the interaction, it is with the NativeScript Vue itself. NS-Vue losses reactivity when navigated with props for the first time (you can check what I mean here: https://github.com/vishnuraghavb/NSVueReactivityLoss). I've found a workaround for this issue by simply opening and closing the drawer on pageload event (this refreshes the view). Now everything is smooth like before.

[farfromrefug]

@vishnuraghavb great that you fixed both. Maybe it would be good to open an issue in N-Vue?

[vishnuraghavb]

I'll definitely do that. Thanks!