Inject frameTimestamp to our context for time of frame

[Szymon20000]

Description

Fixes: #1610

By accident, somebody wrapped a different part of the code in frameTimestamp injection logic. They were supposed to wrap frameCallback but instead wrapped a part that registers frame callbacks.

Changes

NativeProxy.cpp - wrap callback before passing it to NodesManager.

Test code and steps to reproduce

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  useAnimatedReaction,
  cancelAnimation,
  useWorkletCallback,
  Easing,
  useAnimatedGestureHandler,
} from 'react-native-reanimated';
import { View, StyleSheet, Platform } from 'react-native';
import React from 'react';
import { PanGestureHandler } from 'react-native-gesture-handler';

export default function AnimatedStyleUpdateExample(props) {
  const animatedPosition = useSharedValue(0);
  const animatedLinePosition = useSharedValue(0);

  const config = {
    duration: 1000,
    easing: Easing.out(Easing.exp),
  };

  const animateToPoint = useWorkletCallback((destinationPoint) => {
    animatedPosition.value = withTiming(destinationPoint, config);
  }, []);

  const gestureHandler = useAnimatedGestureHandler(
    {
      onStart: (_ , context) => {
        context.currentPosition = animatedPosition.value;
        cancelAnimation(animatedPosition);
      },
      onActive: ({ translationY }, context) => {
        animatedLinePosition.value = context.currentPosition + translationY;
        animatedPosition.value = context.currentPosition + translationY;
      },
      onEnd: ({ state }) => {
        animateToPoint(0);
      },
    },
    [animateToPoint]
  );

  const boxAnimatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: animatedPosition.value - animatedLinePosition.value > 0 ? 'red' : 'black',
      transform: [
        {
          translateY: animatedPosition.value,
        },
      ],
    };
  });

  const lineAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: animatedLinePosition.value,
        },
      ],
    };
  });

  useAnimatedReaction(
    () => animatedPosition.value - animatedLinePosition.value,
    (value) => {
      if(value > 0){
        console.log(Platform.OS, 'Offset', value)
      }
    },
    []
  );

  return (
    <View
      style={styles.container}>
      <PanGestureHandler onGestureEvent={gestureHandler}>
        <Animated.View style={[styles.box, boxAnimatedStyle]} />
      </PanGestureHandler>
      <Animated.View style={[styles.line, lineAnimatedStyle]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#444'
  },
  box: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 400,
    backgroundColor: 'black',
  },
  line: {
    position: 'absolute',
    bottom: 400,
    left: 0,
    right: 0,
    height: 1,
    backgroundColor: 'white',
  },
});

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Added TS types tests
• Added unit / integration tests
• Updated documentation
• Ensured that CI passes