Nativescript: problem with scrolling and swiping nested elements inside <ScrollView>

[ghbakhtiari]

I'm developing a naiveScript app with angular.
so the problem is, inside a scrollview when i put another scrollview or even a google map plugin, the scrolling gets blown up...

the problem with nested scrollviews happens only when the orientation of the parent scrollview and the child scrollview are the same. for example when they're both vertical, the swipe/scroll event mostly works for the parent scrollview and doesn't get passed through to the child.
for example:

<ScrollView orientation="vertical" height="100%" width="100%">
      <StackLayout orientation="vertical" height="200%" width="100%">
            <ScrollView orientation="vertical" height="100"  width="100%">
                   <StackLayout orientation="vertical" height="200"  width="100%">
                          //scrolling here, wont work at all
                   </StackLayout>
             </ScrollView>
      </StackLayout>
</ScrollView>

but when i use a map plugin inside another vertical scrollview, aside from map's vertical scrolling which doesn't work at all, the horizontal scroll also doesn't work properly.
for example:

<ScrollView orientation="vertical" height="100%"  width="100%">
      <StackLayout orientation="vertical" height="200%"  width="100%">
                <MapView (mapReady)="onMapReady($event)"></MapView>
      </StackLayout>
</ScrollView>

the map plugin is from here

aside from these, other (swipe) events also don't work properly and constantly get mixed up with the parent's scrolling event. (even horizontal swipes inside a vertical scrollview)

I've only tested this on android.
my tns version is 2.3.0

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @ghbakhtiari,
Thank you for your interest in NativeScript.
I reviewed your case and was able to reproduce this problem. Unfortunately this is something related with the Android platform and the fact that the parent ScrollView will handle the event before the child component. On that matter, the best practice is to not use nested ScrollViews. Regarding the problem with the nativescript-google-maps-sdk, perhaps you should specify the height of the MapView component.

To be able to use similar functionality, like swipe between different views, you could use nativescript-slides plugin and its SlideContainer For further help, you could also review the demo app in the plugins repo.

I also would like to notify you that you could upgrade your NativeScript to latest version 2.4.2. Instructions, how to do that, could be found here.

To be able to provide more straightforward suggestion for your case, could you provide some more info about your project and the need of using nested ScrollView.

Regards,
@tsonevn

[ghbakhtiari]

hi @tsonevn , thanks for your answer

Unfortunately this is something related with the Android platform and the fact that the parent ScrollView will handle the event before the child component

this is exactly my problem. all the swipe and scroll events go to the parent ScrollView instead of any child element. whether it be a nested Scrollview, or the map, or even just assigning a method to an element's (swipe) event like this:

<ScrollView orientation="vertical" height="100%"  width="100%">
    <StackLayout orientation="vertical" height="200%"  width="100%">
          <Label text="some text" (swipe)="someMethod($event.direction)" height="100" width="100%"></Label>
    </StackLayout>
</ScrollView>

here, inside the <Label> , a vertical swipe (to up or down) wouldn't even call the method and would just scroll. and moreover, unless the swipe is exactly towards right or left, the gesture would again be considered as scrolling ScrollView up and down. even with less than a 30 degree deflection from the horizontal direction. I mean shouldn't it be considered as a bug?

Regarding the problem with the nativescript-google-maps-sdk, perhaps you should specify the height of the MapView component

i've done that, but the problem stays.

To be able to provide more straightforward suggestion for your case, could you provide some more info about your project and the need of using nested ScrollView.

my main problem was with the case of using a map and a (swipe) event on some other element both inside the ScrollView. i just checked the nested ScrollViews to see if the problem occurs with that too.
so the main thing i'm saying is that once inside a ScrollView, it seems like every swipe related event and any component that works with it, would stop working properly...

you think upgrading the nativescript would solve it?

[ghbakhtiari]

any suggestions?

[tsonevn]

Hi @ghbakhtiari.
Thank you for writing us back.
I reviewed your problem again and was able to reproduce this behavior, while using ScrollView and attaching swipe gesture to some of its child component for Android. I have tested this scenario with swipe and pan gestures. We will research further, what is causing this problem. In the meantime you could create your UI without using ScrollView. For example:

<GridLayout rows="100 *" >
      <Label text="some text" (swipe)="someMethod($event)" ></Label>
      <MapView row="1" (mapReady)="onMapReady($event)"></MapView>
</GridLayout>

Regards,
@tsonevn

[ghbakhtiari]

hi @tsonevn
thanks again,

We will research further, what is causing this problem.

I would really appreciate it if there was a solution found. because in this current project I have no choice but to use the ScrollView and that's because of the page design that's been given to me by our graphist...

[ghbakhtiari]

any progress?

[tbsf]

Is it possible to support NestedScrollView on Android to solve this?

https://developer.android.com/reference/android/support/v4/widget/NestedScrollView.html

[TheOnlyMatt]

This problem is very awkward ! :s
Did someone find a fix ?

[marufi-billah]

In android, ScrollView and Nested ScrollView are different, nativescript implements only ScrollView. This cause the problem.

You can extend scrollview class something like below, then add desired content to it.

var scrollView = require('tns-core-modules/ui/scroll-view');

function NestedScroll() {};
NestedScroll.prototype = new scrollView.ScrollView();
NestedScroll.prototype.createNativeView = function(){
    const nativeView = new android.support.v4.widget.NestedScrollView(this._context);
        if (this._androidViewId < 0) {
            this._androidViewId = android.view.View.generateViewId();
        }

        nativeView.setId(this._androidViewId);
    return nativeView;
};

Creating Nested Scrollview:
var nested_scroll = new NestedScroll();

Adding content to it:
nested_scroll.content = example_content; //example_content: Any layout or View

Then add nested_scroll to your parent layout.

This is a quick fix.

Have fun...

[Nevaan]

Hi,

I have a similar problem when using ListView.
Playground here: https://play.nativescript.org/?template=play-ng&id=asaWrV

Swipe event is not fired every time, you have to perfectly, horizontally move your finger. Of course, if you move finger to other element, event which should be considered as element swipe is interpreted as scrolling the listview.

Are there any chances for workaround or fix of this issue? Unfortunately, I dont have enough native mobile development knowledge to tinker with this by myself and provide fix proposition.

[NickIliev]

Closing the issue as multiple ScrollView components are not supported scenario in NativeScript.

[juniorschen]

@tsonevn
2020 do we have any solution?
It still sucks to use swipe inside a scroll :/