Fix targetGlobalOriginX/Y in custom layout animations

[graszka22]

Summary

Fixes #3991

The bug was caused by snapshot being made before all views have layouts updated. It might happen that the child of the view has snapshot made before the parent view is updated, leading to invalid global coordinates.

On iOS we simply make snapshots after all views are updated.

On Android it's more hacky because we don't know when all views have their layouts updated. Only React knows. I dig up a reset() method in LayoutAnimationController that is called by React after all views are updated. It's not semantically correct, but I think there is no semantically correct way to do that unless we want to patch React code.

Test plan

• test layout animations examples
• test shared element transition examples (@piaskowyk they're not merged yet?)
• test example that reproduces the bug:

Example that reproduces the bug

```js import Animated, { Easing, withRepeat, withTiming, } from 'react-native-reanimated'; import { Button, Dimensions, View } from 'react-native'; import React, { useState } from 'react';

const { width: screenWidth } = Dimensions.get('screen');

const Placeholder = ({ width }) => {
return (
<View
style={{
height: 20,
width,
backgroundColor: 'blue',
marginBottom: 8,
}}>
<Animated.View
entering={SlideThroughScreen}
style={{ height: '100%', width: 2, backgroundColor: 'red' }}
/>

);
};

const SlideThroughScreen = (values) => {
'worklet';
console.log('VALUES', values.targetGlobalOriginX);

const animations = {
originX: withRepeat(
withTiming(-values.targetGlobalOriginX + screenWidth, {
duration: 2000,
easing: Easing.linear,
}),
-1
),
};

const initialValues = {
originX: -values.targetGlobalOriginX,
};

return {
initialValues,
animations,
};
};

export default function AnimatedStyleUpdateExample() {
const [show, setShow] = useState(false);
return (
<View
style={{
flex: 1,
flexDirection: 'column',
marginTop: 150,
}}>
<Button onPress={() => setShow(!show)} title="TOGGLE ANIMATION" />
{show && (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
padding: 24,
}}>
<View style={{ justifyContent: 'space-around' }}>



<View
style={{ justifyContent: 'space-around', alignItems: 'flex-end' }}>




)}

);
}

The red lines should animate from the left to the right edge of the screen, like on this video:

https://user-images.githubusercontent.com/6280457/218586432-a0ef31e2-984b-490e-93c5-af10eca176e4.mp4
</details>