Animating height property

Hello there stackoverflow and nativescript users!

I have a problem with animating a view.

What I want: I am trying to create a view where you can click and it opens op a new view below animated pushing all other views further down.

Problem: Only the elements inside are animated or nothing is animated at all.

What I tried: I tried using the nativescript UI Animations but without success because the height property is not supported.

My version: https://gyazo.com/130c2b3467656bcc104c9b8e2c860d94

I would love to hear the solutions you all have come up with to tackle this.

You can use tweenjs in your nativescript application defining the following class which rely on tweenjs (install it with npm i @tweenjs/tween.js)

import * as TWEEN from '@tweenjs/tween.js';
export { Easing } from '@tweenjs/tween.js';

TWEEN.now = function () {
    return new Date().getTime();
};

export class Animation extends TWEEN.Tween {
    constructor(obj) {
        super(obj);
        this['_onCompleteCallback'] = function() {
            cancelAnimationFrame();
        };
    }
    start(time) {
        startAnimationFrame();
        return super.start(time);
    }
}

let animationFrameRunning = false;
const cancelAnimationFrame = function() {
    runningTweens--;
    if (animationFrameRunning && runningTweens === 0) {
        animationFrameRunning = false;
    }
};

let runningTweens = 0;
const startAnimationFrame = function() {
    runningTweens++;
    if (!animationFrameRunning) {
        animationFrameRunning = true;
        tAnimate();
    }
};
const requestAnimationFrame = function(cb) {
    return setTimeout(cb, 1000 / 60);
};
function tAnimate() {
    if (animationFrameRunning) {
        requestAnimationFrame(tAnimate);
        TWEEN.update();
    }
}

Then, to animate the height of a view you can use a method like this (this one works in nativescript-vue but you just have to adapt the way you retrieve your view object) :

import {Animation, Easing} from "./Animation"

toggle() {
    let view = this.$refs.panel.nativeView
    if (this.showPanel) {
        new Animation({ height: this.fixedHeight })
            .to({ height: 0 }, 500)
            .easing(Easing.Back.In)
            .onUpdate(obj => {
                view.originY = 0
                view.scaleY = obj.height / this.fixedHeight;
                view.height = obj.height;
            })
            .start()
            .onComplete(() => this.showPanel = !this.showPanel);
    } else {
        this.showPanel = !this.showPanel
        new Animation({ height: 0 })
            .to({ height: this.fixedHeight }, 500)
            .easing(Easing.Back.Out)
            .onUpdate(obj => {
                view.originY = 0
                view.scaleY = obj.height / this.fixedHeight;
                view.height = obj.height;
            })
            .start();
    }
}

This was discussed here : https://github.com/NativeScript/NativeScript/issues/1764 I mainly improved the onUpdate to have a smooth animation