View Transition Refs (facebook#32038)

This adds refs to View Transition that can resolve to an instance of:

```js
type ViewTransitionRef = {
  name: string,
  group: Animatable,
  imagePair: Animatable,
  old: Animatable,
  new: Animatable,
}
```

Animatable is a type that has `animate(keyframes, options)` and
`getAnimations()` on it. It's the interface that exists on Element that
lets you start animations on it. These ones are like that but for the
four pseudo-elements created by the view transition.

If a name changes, then a new ref is created. That way if you hold onto
a ref during an exit animation spawned by the name change, you can keep
calling functions on it. It will keep referring to the old name rather
than the new name.

This allows imperative control over the animations instead of using CSS
for this.

```js
const viewTransition = ref.current;
const groupAnimation = viewTransition.group.animate(keyframes, options);
const imagePairAnimation = viewTransition.imagePair.animate(keyframes, options);
const oldAnimation = viewTransition.old.animate(keyframes, options);
const newAnimation = viewTransition.new.animate(keyframes, options);
```

The downside of using this API is that it doesn't work with SSR so for
SSR rendered animations they'll fallback to the CSS. You could use this
for progressive enhancement though.

Note: In this PR the ref only controls one DOM node child but there can
be more than one DOM node in the ViewTransition fragment and they are
just left to their defaults. We could try something like making the
`animate()` function apply to multiple children but that could lead to
some weird consequences and the return value would be difficult to
merge. We could try to maintain an array of Animatable that updates with
how ever many things are currently animating but that makes the API more
complicated to use for the simple case. Conceptually this should be like
a fragment so we would ideally combine the multiple children into a
single isolate if we could. Maybe one day the same name could be applied
to multiple children to create a single isolate. For now I think I'll
just leave it like this and you're really expect to just use it with one
DOM node. If you have more than one they just get the default animations
from CSS.

Using this is a little tricky due timing. In this fixture I just use a
layout effect plus rAF to get into the right timing after the
startViewTransition is ready. In the future I'll add an event that fires
when View Transitions heuristics fire with the right timing.

DiffTrain build for [0bf1f39](facebook@0bf1f39)

Author: pull[bot]

compiled-rn/VERSION_NATIVE_FB

@@ -1 +1 @@
-19.1.0-native-fb-056073de-20250109
+19.1.0-native-fb-0bf1f39e-20250110

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<43825cc79ad4b8b2491f4fe4c4cea764>>
+ * @generated SignedSource<<b57d260398996604ce144f77869f967c>>
  */
 
 "use strict";
@@ -420,5 +420,5 @@ __DEV__ &&
     exports.useFormStatus = function () {
       return resolveDispatcher().useHostTransitionStatus();
     };
-    exports.version = "19.1.0-native-fb-056073de-20250109";
+    exports.version = "19.1.0-native-fb-0bf1f39e-20250110";
   })();

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<9605c0b9e6866251811176e83b991a62>>
+ * @generated SignedSource<<d68d8f9b1bea78f147f97a6fc1d03018>>
  */
 
 "use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.1.0-native-fb-056073de-20250109";
+exports.version = "19.1.0-native-fb-0bf1f39e-20250110";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<9605c0b9e6866251811176e83b991a62>>
+ * @generated SignedSource<<d68d8f9b1bea78f147f97a6fc1d03018>>
  */
 
 "use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.1.0-native-fb-056073de-20250109";
+exports.version = "19.1.0-native-fb-0bf1f39e-20250110";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<b215c441e5306b880f26cec96cb108af>>
+ * @generated SignedSource<<babb8c61ae7fdb8ad522282c367e88ee>>
  */
 
 /*
@@ -11646,15 +11646,24 @@ __DEV__ &&
     function commitAttachRef(finishedWork) {
       var ref = finishedWork.ref;
       if (null !== ref) {
-        var instance = finishedWork.stateNode;
+        switch (finishedWork.tag) {
+          case 26:
+          case 27:
+          case 5:
+            var instanceToUse = finishedWork.stateNode;
+            break;
+          default:
+            instanceToUse = finishedWork.stateNode;
+        }
         if ("function" === typeof ref)
           if (shouldProfile(finishedWork))
             try {
-              startEffectTimer(), (finishedWork.refCleanup = ref(instance));
+              startEffectTimer(),
+                (finishedWork.refCleanup = ref(instanceToUse));
             } finally {
               recordEffectDuration();
             }
-          else finishedWork.refCleanup = ref(instance);
+          else finishedWork.refCleanup = ref(instanceToUse);
         else
           "string" === typeof ref
             ? error$jscomp$0("String refs are no longer supported.")
@@ -11663,7 +11672,7 @@ __DEV__ &&
                 "Unexpected ref object provided for %s. Use either a ref-setter function or React.createRef().",
                 getComponentNameFromFiber(finishedWork)
               ),
-            (ref.current = instance);
+            (ref.current = instanceToUse);
       }
     }
     function safelyAttachRef(current, nearestMountedAncestor) {
@@ -25942,11 +25951,11 @@ __DEV__ &&
     };
     (function () {
       var isomorphicReactPackageVersion = React.version;
-      if ("19.1.0-native-fb-056073de-20250109" !== isomorphicReactPackageVersion)
+      if ("19.1.0-native-fb-0bf1f39e-20250110" !== isomorphicReactPackageVersion)
         throw Error(
           'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' +
             (isomorphicReactPackageVersion +
-              "\n  - react-dom:  19.1.0-native-fb-056073de-20250109\nLearn more: https://react.dev/warnings/version-mismatch")
+              "\n  - react-dom:  19.1.0-native-fb-0bf1f39e-20250110\nLearn more: https://react.dev/warnings/version-mismatch")
         );
     })();
     ("function" === typeof Map &&
@@ -25983,10 +25992,10 @@ __DEV__ &&
       !(function () {
         var internals = {
           bundleType: 1,
-          version: "19.1.0-native-fb-056073de-20250109",
+          version: "19.1.0-native-fb-0bf1f39e-20250110",
           rendererPackageName: "react-dom",
           currentDispatcherRef: ReactSharedInternals,
-          reconcilerVersion: "19.1.0-native-fb-056073de-20250109"
+          reconcilerVersion: "19.1.0-native-fb-0bf1f39e-20250110"
         };
         internals.overrideHookState = overrideHookState;
         internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26132,5 +26141,5 @@ __DEV__ &&
       listenToAllSupportedEvents(container);
       return new ReactDOMHydrationRoot(initialChildren);
     };
-    exports.version = "19.1.0-native-fb-056073de-20250109";
+    exports.version = "19.1.0-native-fb-0bf1f39e-20250110";
   })();

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<6d0bb599e6dffc06990ad7b4086e34bb>>
+ * @generated SignedSource<<6c245b9d2357f710e83bb65e2bca53dc>>
  */
 
 /*
@@ -8051,15 +8051,14 @@ function safelyAttachRef(current, nearestMountedAncestor) {
   try {
     var ref = current.ref;
     if (null !== ref) {
-      var instance = current.stateNode;
       switch (current.tag) {
         case 26:
         case 27:
         case 5:
-          var instanceToUse = instance;
+          var instanceToUse = current.stateNode;
           break;
         default:
-          instanceToUse = instance;
+          instanceToUse = current.stateNode;
       }
       "function" === typeof ref
         ? (current.refCleanup = ref(instanceToUse))
@@ -12461,20 +12460,20 @@ function extractEvents$1(
   }
 }
 for (
-  var i$jscomp$inline_1526 = 0;
-  i$jscomp$inline_1526 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1526++
+  var i$jscomp$inline_1525 = 0;
+  i$jscomp$inline_1525 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1525++
 ) {
-  var eventName$jscomp$inline_1527 =
-      simpleEventPluginEvents[i$jscomp$inline_1526],
-    domEventName$jscomp$inline_1528 =
-      eventName$jscomp$inline_1527.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1529 =
-      eventName$jscomp$inline_1527[0].toUpperCase() +
-      eventName$jscomp$inline_1527.slice(1);
+  var eventName$jscomp$inline_1526 =
+      simpleEventPluginEvents[i$jscomp$inline_1525],
+    domEventName$jscomp$inline_1527 =
+      eventName$jscomp$inline_1526.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1528 =
+      eventName$jscomp$inline_1526[0].toUpperCase() +
+      eventName$jscomp$inline_1526.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1528,
-    "on" + capitalizedEvent$jscomp$inline_1529
+    domEventName$jscomp$inline_1527,
+    "on" + capitalizedEvent$jscomp$inline_1528
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -15959,16 +15958,16 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
     0 === i && attemptExplicitHydrationTarget(target);
   }
 };
-var isomorphicReactPackageVersion$jscomp$inline_1769 = React.version;
+var isomorphicReactPackageVersion$jscomp$inline_1768 = React.version;
 if (
-  "19.1.0-native-fb-056073de-20250109" !==
-  isomorphicReactPackageVersion$jscomp$inline_1769
+  "19.1.0-native-fb-0bf1f39e-20250110" !==
+  isomorphicReactPackageVersion$jscomp$inline_1768
 )
   throw Error(
     formatProdErrorMessage(
       527,
-      isomorphicReactPackageVersion$jscomp$inline_1769,
-      "19.1.0-native-fb-056073de-20250109"
+      isomorphicReactPackageVersion$jscomp$inline_1768,
+      "19.1.0-native-fb-0bf1f39e-20250110"
     )
   );
 ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -15988,24 +15987,24 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
     null === componentOrElement ? null : componentOrElement.stateNode;
   return componentOrElement;
 };
-var internals$jscomp$inline_2217 = {
+var internals$jscomp$inline_2216 = {
   bundleType: 0,
-  version: "19.1.0-native-fb-056073de-20250109",
+  version: "19.1.0-native-fb-0bf1f39e-20250110",
   rendererPackageName: "react-dom",
   currentDispatcherRef: ReactSharedInternals,
-  reconcilerVersion: "19.1.0-native-fb-056073de-20250109"
+  reconcilerVersion: "19.1.0-native-fb-0bf1f39e-20250110"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2218 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2217 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2218.isDisabled &&
-    hook$jscomp$inline_2218.supportsFiber
+    !hook$jscomp$inline_2217.isDisabled &&
+    hook$jscomp$inline_2217.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2218.inject(
-        internals$jscomp$inline_2217
+      (rendererID = hook$jscomp$inline_2217.inject(
+        internals$jscomp$inline_2216
       )),
-        (injectedHook = hook$jscomp$inline_2218);
+        (injectedHook = hook$jscomp$inline_2217);
     } catch (err) {}
 }
 exports.createRoot = function (container, options) {
@@ -16099,4 +16098,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
   listenToAllSupportedEvents(container);
   return new ReactDOMHydrationRoot(initialChildren);
 };
-exports.version = "19.1.0-native-fb-056073de-20250109";
+exports.version = "19.1.0-native-fb-0bf1f39e-20250110";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-profiling.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<ac7a1701472a637b2c77e02e39d83f0d>>
+ * @generated SignedSource<<5ed29f95ffe3e0550d2f61efaf661e98>>
  */
 
 /*
@@ -8343,15 +8343,14 @@ function safelyAttachRef(current, nearestMountedAncestor) {
   try {
     var ref = current.ref;
     if (null !== ref) {
-      var instance = current.stateNode;
       switch (current.tag) {
         case 26:
         case 27:
         case 5:
-          var instanceToUse = instance;
+          var instanceToUse = current.stateNode;
           break;
         default:
-          instanceToUse = instance;
+          instanceToUse = current.stateNode;
       }
       if ("function" === typeof ref)
         if (shouldProfile(current))
@@ -13102,20 +13101,20 @@ function extractEvents$1(
   }
 }
 for (
-  var i$jscomp$inline_1619 = 0;
-  i$jscomp$inline_1619 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1619++
+  var i$jscomp$inline_1618 = 0;
+  i$jscomp$inline_1618 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1618++
 ) {
-  var eventName$jscomp$inline_1620 =
-      simpleEventPluginEvents[i$jscomp$inline_1619],
-    domEventName$jscomp$inline_1621 =
-      eventName$jscomp$inline_1620.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1622 =
-      eventName$jscomp$inline_1620[0].toUpperCase() +
-      eventName$jscomp$inline_1620.slice(1);
+  var eventName$jscomp$inline_1619 =
+      simpleEventPluginEvents[i$jscomp$inline_1618],
+    domEventName$jscomp$inline_1620 =
+      eventName$jscomp$inline_1619.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1621 =
+      eventName$jscomp$inline_1619[0].toUpperCase() +
+      eventName$jscomp$inline_1619.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1621,
-    "on" + capitalizedEvent$jscomp$inline_1622
+    domEventName$jscomp$inline_1620,
+    "on" + capitalizedEvent$jscomp$inline_1621
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -16608,16 +16607,16 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
     0 === i && attemptExplicitHydrationTarget(target);
   }
 };
-var isomorphicReactPackageVersion$jscomp$inline_1864 = React.version;
+var isomorphicReactPackageVersion$jscomp$inline_1863 = React.version;
 if (
-  "19.1.0-native-fb-056073de-20250109" !==
-  isomorphicReactPackageVersion$jscomp$inline_1864
+  "19.1.0-native-fb-0bf1f39e-20250110" !==
+  isomorphicReactPackageVersion$jscomp$inline_1863
 )
   throw Error(
     formatProdErrorMessage(
       527,
-      isomorphicReactPackageVersion$jscomp$inline_1864,
-      "19.1.0-native-fb-056073de-20250109"
+      isomorphicReactPackageVersion$jscomp$inline_1863,
+      "19.1.0-native-fb-0bf1f39e-20250110"
     )
   );
 ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16637,12 +16636,12 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
     null === componentOrElement ? null : componentOrElement.stateNode;
   return componentOrElement;
 };
-var internals$jscomp$inline_1871 = {
+var internals$jscomp$inline_1870 = {
   bundleType: 0,
-  version: "19.1.0-native-fb-056073de-20250109",
+  version: "19.1.0-native-fb-0bf1f39e-20250110",
   rendererPackageName: "react-dom",
   currentDispatcherRef: ReactSharedInternals,
-  reconcilerVersion: "19.1.0-native-fb-056073de-20250109",
+  reconcilerVersion: "19.1.0-native-fb-0bf1f39e-20250110",
   getLaneLabelMap: function () {
     for (
       var map = new Map(), lane = 1, index$292 = 0;
@@ -16660,16 +16659,16 @@ var internals$jscomp$inline_1871 = {
   }
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2277 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2276 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2277.isDisabled &&
-    hook$jscomp$inline_2277.supportsFiber
+    !hook$jscomp$inline_2276.isDisabled &&
+    hook$jscomp$inline_2276.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2277.inject(
-        internals$jscomp$inline_1871
+      (rendererID = hook$jscomp$inline_2276.inject(
+        internals$jscomp$inline_1870
       )),
-        (injectedHook = hook$jscomp$inline_2277);
+        (injectedHook = hook$jscomp$inline_2276);
     } catch (err) {}
 }
 exports.createRoot = function (container, options) {
@@ -16763,4 +16762,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
   listenToAllSupportedEvents(container);
   return new ReactDOMHydrationRoot(initialChildren);
 };
-exports.version = "19.1.0-native-fb-056073de-20250109";
+exports.version = "19.1.0-native-fb-0bf1f39e-20250110";