Use transformOrigin in chat screen avatar for animation

[Parveshdhull]

Summary

required for #18409

We are animating the chat big avatar on the scroll of chat and changing its scale value as shown in video.

But currently, to keep its position fixed while scaling, we are using three parameters(scale, top, and left), because transformation is happening from the center.

But in version 0.73, react native added a new parameter transformOrigin which allows it to scale while keeping its left and top positions fixed. In this way, we will be able to remove the other 2 shared values.

transformOrigin: https://reactnative.dev/docs/next/transforms#transform-origin

Current Code: https://github.com/status-im/status-mobile/blob/4eff9cc39cda0c33ca4a53ae9079d58345258d8f/src/status_im/contexts/chat/messenger/messages/list/view.cljs#L114C3-L114C3

Depends on: #18291

[Parveshdhull]

Further Notes:

When keyboard is closed, screen/content suddenly falls(I think we can't control that, its default behaviour), and we only receive keyboard closed event after that.
But as in the scrolled state we had smaller avatar, after falling avatar will be in smaller state until we change it back to big avatar.
For some devices this transition will be fast enough(especially ios), so we will not notice. But for some slower device this sudden transition will be very clear.
I am not sure what is expected behaviour, so I animated this transition as we can see in the end of video.

on-layout -> (reanimated/animate distance-from-list-top ...

output-2024-01-11_18.27.44.mp4