React-native-reanimated: Add onLayout native events for Reanimated 2

[AlexeyVlasenko]

Description

onLayout handler should work on UI thread

Motivation

measure() measures paddings with some infelicity, while onLayout returns correct height/width/etc.

Example

The following example is default accordion animation with opened/closed component inside

1) Closed => Open transition (height)

2) Open => Closed transition (height)

[github-actions[bot]]

Issue validator - update # 2

Hello!
Congratulations! Your issue passed the validator! Thank you!

[likern]

@AlexeyVlasenko How this should be implemented?

Could you describe your vision and API? I think onLayout is expected to be called on JS side so changing <View /> to Reanimated <Animated.View /> does not cause error that JS function is called directly without runOnJS.

[nandorojo]

@likern is there a way to call measure whenever its size changes? Should we just call measure inside of onLayout?

[terrysahaidak]

I would go with that approach. It gives freedom to the developer.

const handler = useAnimatedLayoutEvent((layout) => {
  "worklet";

  // do whatever you want
}, [])

<Animated.View onLayout={handler} />

[likern]

@terrysahaidak I like that approach, I think it's better than what I thought about (adding new on UI callback)

[nandorojo]

@terrysahaidak I assume that's not a real API yet, right? Seems like that would work for me.

[terrysahaidak]

Not yet. But would be cool to have. Measure is handy but doesn't work all the times.

[nandorojo]

Agreed, especially for web where layout changes are very common. I'll stick to normal layout for now.