Description

When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the values returned by measure are incorrect.

This was actually fixed on 0.77, so this PR is a cherrypick of "Trigger rerender on animation complete (#37836)" from the upstream RN repository and "fix: values for animated props are not set correctly after display changes to none" from the 0.77 branch. "fix: the infinite loop caused by the error "Animated node with tag xxx does not exist"." (d7083d23e9573c805196f813d5c1051c702e150c) is also cherrypicked, as without that native driver is bugged and after a coupld of animations doesn't work properly.

Changes

• fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure.

Test Plan

Check the code below, after pressing "Measure Box", the height logged should be 100.

import React, {useLayoutEffect, useRef} from 'react';
import {TouchableOpacity, View, Text, Animated} from 'react-native';

export default function App() {
  const scaleValue = useRef(new Animated.Value(0.2)).current;
  const boxRef = useRef<View>(null);

  React.useEffect(() => {
    Animated.spring(scaleValue, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true,
    }).start();
  }, []);

  const measureBox = () => {
    boxRef.current?.measure((x, y, width, height, pageX, pageY) => {
      console.log({x, y, width, height, pageX, pageY});
    });
  };

  useLayoutEffect(() => {
    measureBox();
  }, []);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        gap: 40,
      }}>
      <TouchableOpacity
        onPress={measureBox}
        style={{padding: 10, backgroundColor: '#eee'}}>
        <Text>Measure Box</Text>
      </TouchableOpacity>

      <Animated.View
        ref={boxRef}
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'orange',
          borderRadius: 8,
          transform: [{scale: scaleValue}],
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Scaled Box</Text>
      </Animated.View>
    </View>
  );
}

Checklist

• Does not involve incompatible changes; if involved, has been reviewed accordingly.
• Does not impact performance, or performance testing has been conducted without degradation.
• Complies with the relevant coding standards.
• Does not involve documentation updates, or the documentation has been updated.
• Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added.
• No illegal file inclusions exist, such as images or code.