Nativescript Gesture- Rotation strange behavior

Question

I'm using Nativescript Vue and trying to rotate text in TextView tag via Nativescript-Gesture Rotation. Text rotates, but it isn't smooth, it jumps from one direction to another. And that's my question

Why this happens? What is the reason that NS-Gesture Rotation acts so strange? And how to make it work?

I'll post my sample example here and in the NS Playground too.

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
            <StackLayout class="home-panel">
                <TextView @rotation="onRotation" id="liveLabel" textWrap="true"
                    :rotate="textRotation" editable="false">
                    <FormattedString id="formString">
                        <Span id="spanText" text="Test text" fontSize="20"
                            color="red" />
                    </FormattedString>
                </TextView>
            </StackLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                textRotation: 0
            };
        },
        methods: {
            onRotation(args) {
                console.log(
                    "Rotate angle: " + args.rotation + " state: " + args.state
                );
                this.textRotation = Math.floor(args.rotation);
            }
        }
    };
</script>

Answer 1

Actually what you are seeing is totally expected and you are making it happen.

Imagine you are calculating position on an object and moving it at the same time, so the rotation event on TextView is giving the right position based on your finger movements once and then gives another position based on the new rotate value you applied on the TextView.

In order to solve this, you should have 2 copy of the object (TextView here). One to listen for finger movements and another to animate, something like this.

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <StackLayout class="home-panel">
            <GridLayout>
                <TextView ref="animatedLbl" textWrap="true" :rotate="textRotation"
                    editable="false" visibility="hidden" verticalAlignment="top">
                    <FormattedString>
                        <Span text="Test text" fontSize="20" color="red" />
                    </FormattedString>
                </TextView>
                <TextView ref="hostLbl" @rotation="onRotation" textWrap="true"
                    editable="false" verticalAlignment="top">
                    <FormattedString>
                        <Span text="Test text" fontSize="20" color="red" />
                    </FormattedString>
                </TextView>
            </GridLayout>
        </StackLayout>
    </Page>
</template>

<script>
    import * as GestureModule from "tns-core-modules/ui/gestures";
    export default {
        data() {
            return {
                textRotation: 0
            };
        },
        methods: {
            onRotation(args) {
                if (args.state === GestureModule.GestureStateTypes.began) {
                    this.$refs.hostLbl.nativeView.visibility = "hidden";
                    this.$refs.animatedLbl.nativeView.visibility = "visible";
                }
                this.textRotation = Math.floor(args.rotation);
                if (
                    args.state === GestureModule.GestureStateTypes.cancelled ||
                    args.state === GestureModule.GestureStateTypes.ended
                ) {
                    this.$refs.hostLbl.nativeView.rotate = this.textRotation;
                    this.$refs.hostLbl.nativeView.visibility = "visible";
                    this.$refs.animatedLbl.nativeView.visibility = "hidden";
                }
            }
        }
    };
</script>

Playground Sample