SignaturePad inside ScrollView

[droopram]

I have the following XML (not exactly but the gist is the same):

<ScrollView>
    <StackLayout #form>
        <ActivityIndicator 
                [busy]="isLoading" 
                [visibility]="isLoading ? 'visible' : 'collapsed'" 
                row="1" 
                horizontalAlignment="center" 
                verticalAlignment="center"></ActivityIndicator>
        <StackLayout #container [class.visible]="!isLoading">
                <DrawingPad id="1" height="120" penColor="#212F3D" penWidth="3" class="drawingpad"></DrawingPad>
        <!-- Lots of elements -->
        </StackLayout>
    </StackLayout>
</ScrollView>

When I try to draw vertical lines, the scrollview takes over and scrolls the page instead of drawing within the pad.. Any idea's on how to fix this? Thanks!

[lukeramsden]

Having this same issue, did you figure out a workaround?

[krisidmisso]

@lukeramsden you could ty to set isUserInteractionEnabled: <ListView isUserInteractionEnabled="false" items="{{ source }}" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap"> as described here https://github.com/NativeScript/NativeScript/issues/2892 i had the same issue

[mjbonanno]

@droopram

Try this out:

<ScrollView  :isScrollEnabled="allowScrolling">

Then create the data property:

data() {
    return {
      allowScrolling: true
    };
  }

This will allow scrolling by default.

Then pass the allowScrolling value as a prop to your child component and watch the child component: (I'm using single file components, you may not need this)

:scrolling="allowScrolling"
v-on:allowScrolling="allowScrolling = $event"

Inside your child component, add a button to toggle scrolling on and off

<Button text="Tap to Sign" @tap="toggleScrolling(event)"/>

Finally, add a method to emit the new value to the parent component:

 toggleScrolling(event) {
      this.$emit("allowScrolling", !this.scrolling);
    }

Hopefully this gets you closer to a workable solution.

[tommag21]

This is my workaround (Nativescript-Vue)

<ScrollView ref="scrollView>
    <StackLayout>
        <DrawingPad @touch="onSignatureTouch" />
    </StackLayout>
</ScrollView>

onSignatureTouch(args) {
    if (args.android) return;
    if (args.action === "down") this.$refs.scrollView.nativeView.ios.scrollEnabled = false;
    else if (args.action === "up") this.$refs.scrollView.nativeView.ios.scrollEnabled = true;
}