Huh, that's odd - a reduced example shows the same behavior (without using refs), the opacity animates in, but scale does not. Will need to check in a fresh core app to compare, because I can't think of anything we do that would affect this on the vue side.

Updated: This doesn't work either - only when triggered a 2nd time with the tap. 🤔

<script lang="ts" setup>
function animateIn(args) {
  const view = args.object;
  view.color = "green";
  view.scaleX = 0;
  view.scaleY = 0;

  view
    .animate({
      opacity: 1,
      scale: {
        x: 1,
        y: 1,
      },
      duration: 3000,
    })
    .then(() => {
      view.color = "red";
    })
    .catch((err) => console.log(err));
}
</script>

<template>
  <Button
    ref="btnNewTrip"
    opacity="0"
    scaleX="0.1"
    scaleY="0.1"
    @loaded="animateIn"
    @tap="animateIn"
  >
    New Trip
  </Button>
</template>

This works, waiting 1ms. Super weird, not sure why.

<script lang="ts" setup>
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function animateIn(args) {
  await wait(1);
  const view = args.object;
  view.color = "green";
  // view.scaleX = 0;
  // view.scaleY = 0;

  view
    .animate({
      opacity: 1,
      scale: {
        x: 1,
        y: 1,
      },
      duration: 3000,
    })
    .then(() => {
      view.color = "red";
    })
    .catch((err) => console.log(err));
}
</script>

<template>
  <Button
    ref="btnNewTrip"
    opacity="0"
    scaleX="0.1"
    scaleY="0.1"
    @loaded="animateIn"
    @tap="animateIn"
  >
    New Trip
  </Button>
</template>

Yes, it's strange, because at that moment the view is supposed to be available, I don't know what it has to do with waiting 1ms 🤔

I can't get this to work, I don't even mention a wait(1000)

The animation does work when one listens for the loaded event on the element/component. The animation transforms the opacity property as expected, I'm not sure why it doesn't work for the scale properties but I believe it could be due to some layout calculation pending or done in the background.

NB: The loaded event gets triggered again when you navigate from the screen and return to it.

const animateButton = (view: View) => {
  view.animate({
     opacity: 1,
     duration: 500
  })
}

<template>
  <Button opacity="0" @loaded="animateButton($event.object)">New Trip</Button>
</template>

I'm having problems passing an imageSource as a ref to a function of a component. I think vue is not able to have reactive objects like these for some reason.

Could it be a problem with the new proxies?

I'm having problems passing an imageSource as a ref to a function of a component. I think vue is not able to have reactive objects like these for some reason.

Could it be a problem with the new proxies?

Do you have an example? I don't think you would want to wrap an imageSource as a ref though...

I know, it's weird, I'll change it to url and load the imageSource from within but, just as a note, if I do toRaw(value) it works as expected

    [startIconProperty.setNative](value?: ImageSource) {
        if (value && value.android) {
            try {
                const rawValue = toRaw(value) //.  <-- THIS
                const drawable = new android.graphics.drawable.BitmapDrawable(Utils.android.getApplicationContext().getResources(), rawValue.android);
                console.log(drawable)
                this.layoutView.setStartIconDrawable(drawable);
                this.layoutView.setStartIconTintList(null);
                this.layoutView.setStartIconTintMode(android.graphics.PorterDuff.Mode.MULTIPLY)

            }catch (e) {
                console.log("Error setting startIcon")
                console.log(e)
            }
        } else {
            this.layoutView.setStartIconDrawable(null);
            this.layoutView.setStartIconOnClickListener(null);
        }
    }

Could something like this also happen with the animations? I have commented for that

EDIT: what was failing at this point was when accessing value.android, if I did console.log(value) I could see that the object had an android property but nevertheless if I tried to access it the application would close

It is also strange that this with dominative worked, so how are we inserting the nativeView element?

sorry to be so heavy lol what if we let .value be the native view? that vue manage the dom I mean, I say it because I think you are already prepared for this

Confirmed, I've put all my animations under toRaw and it's working for me. I don't know if I have any setTimeout out there since they are some utilities that I have from other projects using the compositionApi and now everything works

  const panel: View = toRaw(viewPanel.value?.nativeView)

but before it worked and now it doesn't