feat: allow scroll inside drawer panels (angular)

[lekhmanrus]

Could be used to intercept touch events inside the Drawer panels. Usage example:

<Drawer>
  <FlexboxLayout leftDrawer>
    <ScrollView drawerInterceptTouch>...</ScrollView>
  </FlexboxLayout>
</Drawer>

closes #6

[farfromrefug]

@lekhmanrus can you explain a bit the use case for this?

[lekhmanrus]

Hi @farfromrefug,

Currently, ScrollView doesn't work on the leftDrawer in my NativeScript Angular project. I've found an issue related (#6). And there is a solution provided by @mobilemindtec on the first comment. But that solution, in my opinion, should be a part of ui-drawer library. Because currently developers are required to copy-paste the same code across different drawers/projects.

So, basically, before these changesI needed to do:

<Drawer>
  <FlexboxLayout leftDrawer>
    <ScrollView (touch)="interceptTouch($event)">...</ScrollView>
  </FlexboxLayout>
</Drawer>

  public interceptTouch($event: TouchGestureEventData): void {
    if (isAndroid) {
      const shouldIntercept = [
        android.view.MotionEvent.ACTION_DOWN,
        android.view.MotionEvent.ACTION_MOVE
      ].indexOf($event.android.getActionMasked()) !== -1;
      this._drawer?.android.requestDisallowInterceptTouchEvent(shouldIntercept);
    }
  }

And after:

<Drawer>
  <FlexboxLayout leftDrawer>
    <ScrollView drawerInterceptTouch>...</ScrollView>
  </FlexboxLayout>
</Drawer>

and nothing on TS side.

Which is a much better dev experience, right?

I suppose the same approach (applying drawerInterceptTouch) should also work for ListView. But currently, I've tested just a ScrollView.

[farfromrefug]

@lekhmanrus ok now i understand. What bugs me is that it would only work with angular. let me try to think about a more generic solution

[farfromrefug]

@lekhmanrus This has now been fixed in latest version 0.1.0. So there is 2 ways to handle this:

• add disallowInterceptTouch on the scrollview which has the behavior you implemented.
• add gestureHandlerOptions like shown here https://github.com/nativescript-community/ui-drawer/blob/c47f20d7473875435ff8a0b2b9e2ea4520870565/demo-snippets/vue/BasicDrawer.vue#L9

I would strongly advise you to use the second option. The reason is that with the second option you can still activate the drawer gesture by panning horizontally

[lekhmanrus]

Thank you @farfromrefug 🙂