fix: use animated reaction instead of derivation

[vonovak]

📜 Description

💡 Motivation and Context

this is more or less a stylistic change, the useAnimatedReaction hook is better suited for this than useDerivedValue which is supposed to derive a value, but not have side effects

📢 Changelog

not needed I guess?

🤔 How Has This Been Tested?

I ran this on an Android 10 device (huawei) and it works the same as before.

I used the 'Aware scroll view' example to test this out and I have to say that, unfortuantely, on my device the animation is not (and was not) smooth. That's a different problem though, I might try to open a PR for that later.

📸 Screenshots (if appropriate):

📝 Checklist

• CI successfully passed

[kirillzyusko]

Good job @vonovak!

May I ask you to make the same changes in FabricExample as well?

I know it's bad practice to have code duplication and I want to have a single code for example apps, but for now I have to duplicate it 😔

I have to say that, unfortuantely, on my device the animation is not (and was not) smooth. That's a different problem though, I might try to open a PR for that later.

Did you (or maybe you can) test it on Android 11+? And on which RN version are you testing this example?

On Android < 11 animations are not perfectly synchronized. And I noticed that on RN> 0.72 some examples that were relying on height animations became laggy 🤔 I wanted to investigate why but didn't have time for that (and I still don't understand whether it's a problem of RN or new REA version).

[vonovak]

Hello, yes, I'll update it too on Monday 😉.

And test on newer Android.

I tested directly on this branch so whatever the example is running now.

Here's a recording from my device. It is visibly "jumpy".

SVID_20231006_120803_1.mp4

[kirillzyusko]

Yes @vonovak

But I see, that only back transitions are very laggy. When keyboard appears the animation is pretty smooth, right?

[vonovak]

That is correct @kirillzyusko 👍

[kirillzyusko]

@vonovak really strange 🤔 On my device (Pixel 7 Pro, Android 13) everything is pretty smooth:

telegram-cloud-document-2-5260428862709315175.mp4

And on my Redmi Note 5 Pro with Android 9 it's also pretty smooth 🤔

Maybe there is a conflict between height animation and calling scrollTo 🤷‍♂️ If you can reproduce this problem on emulator - let me know a configuration and I'll try it on my end 👍

[vonovak]

Eh, different day, same crap to deal with - android 🫣😄.

Okay, I'll see if I can repro.

[vonovak]

@kirillzyusko I pushed the changes to fabric example. Regarding the repro, I ended up doing things differently and not sure I'll have time to create it, sorry about that.