ListView into drawer not scroll on Android

[mobilemindtec]

Hi,

I'm try put a listview into drawer, but listview scrolling not work.

[mobilemindtec]

To work I had to implement requestDisallowInterceptTouchEvent:

    enableTouchEvent: () ->
      if not isIOS
        @$refs.drawerLisView.nativeView.android.setOnTouchListener(new android.view.View.OnTouchListener({
          onTouch: (v, ev) =>

            switch ev.getActionMasked()
              when android.view.MotionEvent.ACTION_DOWN, android.view.MotionEvent.ACTION_MOVE
                @touchInList(true)
              when android.view.MotionEvent.ACTION_UP
                @touchInList( false)
              
            return false
        })) 

    touchInList: (state) ->
      if not isIOS
        @$refs.drawer.nativeView.android.requestDisallowInterceptTouchEvent(state)

[farfromrefug]

could you try with @nativescript-community/ui-collectionview ? that would help find out where the issue really is

[keerl]

I am having the same issue on Android with anything scrollable (ListView, ScrollView, CollectionView, Pager, etc). Here is a project that shows the issue.

ui-drawer-android-scroll-issue.zip

[farfromrefug]

@keerl @mobilemindtec not perfect but it works. With the latest version this will work.

• assign a gesture handler to the collectionview/listview
• allow drawer gesture to work simultaneously
• prevent the drawer from dragging if the collectionview "can" scroll

<template>
    <Page>
        <ActionBar>
            <Label text="Vue.js Demo" />
        </ActionBar>

        <Drawer ref="drawer" :simultaneousHandlers="[collectionViewGestureTag]" :shouldPan="shouldPan">
            <GridLayout ~bottomDrawer width="80%" height="75%">
                <Label text="This is the bottom drawer" />
                <CollectionView
                    ref="collectionView"
                    automationText="collectionView"
                    iosOverflowSafeArea="true"
                    :items="itemList"
                    itemIdGenerator="index"
                    colWidth="50%"
                    rowHeight="200"
                    @loaded="onCollectionViewLoaded"
                >
                    <v-template>
                        <GridLayout rows="*, auto" :backgroundColor="item.color" class="item">
                            <StackLayout row="1">
                                <Label row="1" :text="item.name" class="title" />
                                <Label row="1" :text="item.color" class="subtitle" />
                            </StackLayout>
                        </GridLayout>
                    </v-template>
                </CollectionView>
            </GridLayout>

            <StackLayout ~mainContent backgroundColor="white">
                <Button @tap="onOpenBottomDrawer" text="Open Bottom Drawer" width="250" marginTop="25" />
            </StackLayout>
        </Drawer>
    </Page>
</template>

<script lang="typescript">
import {
    HandlerType,
    Manager,
} from '@nativescript-community/gesturehandler';
const SCROLLVIEW_TAG= 123;
export default {
  computed: {
    message() {
      return "Blank {N}-Vue app";
    }
  },
  data() {
      const items = [
          { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
          { index: 1, name: 'EMERALD', color: '#2ecc71' },
          { index: 2, name: 'PETER RIVER', color: '#3498db' },
          { index: 3, name: 'AMETHYST', color: '#9b59b6' },
          { index: 4, name: 'WET ASPHALT', color: '#34495e' },
          { index: 5, name: 'GREEN SEA', color: '#16a085' },
          { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
          { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
          { index: 8, name: 'WISTERIA', color: '#8e44ad' },
          { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
          { index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
          { index: 11, name: 'CARROT', color: '#e67e22' },
          { index: 12, name: 'ALIZARIN', color: '#e74c3c' },
          { index: 13, name: 'CLOUDS', color: '#ecf0f1' },
          { index: 14, name: 'CONCRETE', color: '#95a5a6' },
          { index: 15, name: 'ORANGE', color: '#f39c12' },
          { index: 16, name: 'PUMPKIN', color: '#d35400' },
          { index: 17, name: 'POMEGRANATE', color: '#c0392b' },
          { index: 18, name: 'SILVER', color: '#bdc3c7' },
          { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
      ];
      return {
          collectionViewGestureTag:SCROLLVIEW_TAG,
          itemList: items
      };
  },
  methods: {
      onOpenBottomDrawer() {
          this.$refs["drawer"].open("bottom");
      },
      onCollectionViewLoaded(event) {
        const manager = Manager.getInstance();

        const gestureHandler = manager.createGestureHandler(HandlerType.NATIVE_VIEW, SCROLLVIEW_TAG, {
            shouldActivateOnStart:false,
            disallowInterruption:false,
            });
        gestureHandler.attachToView(event.object);
      },
      shouldPan(side) {
          if (side === 'bottom'){
              return this.$refs.collectionView.nativeView.scrollOffset === 0;
          }
      }
  }
};

[farfromrefug]

@mobilemindtec btw i prefer your solution. Does it work as expected on iOS "by default" ?

[keerl]

Awesome. I'll try this out when I get a chance. Everything seems to be working "by default" on iOS too.

[mobilemindtec]

Hi @farfromrefug @keerl ,

I didn't have this problem on iOS, everything works as expected.

[keerl]

@farfromrefug Thanks for that code, it works great! The only thing I changed was this:

return this.$refs.collectionView.nativeView.scrollOffset === 0;

to

return this.$refs.collectionView.nativeView.scrollOffset <= 0;

because on iOS the scrollOffset will go negative.

[farfromrefug]

@keerl @mobilemindtec thanks to @lekhmanrus i finally fixed this the right way in 0.1.0
So there is 2 ways to handle this:

• add disallowInterceptTouch on the scrollview which has the behavior implemented by @mobilemindtec .
• add gestureHandlerOptions like shown here

  ui-drawer/demo-snippets/vue/BasicDrawer.vue

  Line 9 in c47f20d

  :gestureHandlerOptions="{

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