fix: disconnect AnimatedProps before attaching a new native view

## Summary:

When an animated component replaces its underlying native view, `AnimatedProps.setNativeView()` connects the existing animated props node to the replacement without disconnecting the previous view. On Android, this causes a crash:

```text
Animated node X is already attached to a view: Y
```

Disconnect the previous target before connecting the replacement.

## Changelog:

[ANDROID] [FIXED] - Prevent native Animated crashes when an animated component replaces its underlying native view.

## Test Plan:

You can use this code to reproduce a crash:

```tsx
import React, { forwardRef, useState } from "react";
import { Animated, Button, StyleSheet, Text, View } from "react-native";

import type { ViewProps } from "react-native";

// Keep the Animated wrapper mounted while replacing its native View.
const ReplacingView = Animated.createAnimatedComponent(
  forwardRef<View, ViewProps & { generation: number }>(function ReplacingView(
    { generation, ...props },
    ref,
  ) {
    return <View {...props} key={generation} ref={ref} />;
  }),
);

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 24, paddingTop: 64, backgroundColor: "white" },
});

export default function Issue1604() {
  const [generation, setGeneration] = useState(0);
  const [opacity] = useState(
    () => new Animated.Value(1, { useNativeDriver: true }),
  );
  const replaceView = () => setGeneration((value) => value + 1);

  return (
    <View style={styles.screen}>
      <Text>Native Animated crash repro</Text>
      <Button title="Replace view" onPress={replaceView} />
      <ReplacingView generation={generation} style={{ opacity }}>
        <Text testID="issue1604-generation">View {generation}</Text>
      </ReplacingView>
    </View>
  );
}
```

|Before|After|
|-------|-----|
|<video src="https://github.com/user-attachments/assets/40f5b75f-e250-4c06-b00b-7084a2011064">|<video src="https://github.com/user-attachments/assets/a2524013-3923-4b8f-ac01-d0ede0f8edc2">|

Differential Revision: D128344147

Pull Request resolved: #59099

Author: kirillzyusko

packages/react-native/Libraries/Animated/nodes/AnimatedProps.js

@@ -268,6 +268,9 @@ export default class AnimatedProps extends AnimatedNode {
     if (this._target?.instance === instance) {
       return;
     }
+    if (this.__isNative && this._target != null) {
+      this.#disconnectAnimatedView(this._target);
+    }
     const target = (this._target = {instance, connectedViewTag: null});
     if (this.__isNative) {
       this.#connectAnimatedView(target);

packages/react-native/src/private/animated/__tests__/AnimatedNative-test.js

@@ -31,6 +31,11 @@ describe('Native Animated', () => {
     };
   }
 
+  function createViewInstance(): React.ElementRef<React.ElementType> {
+    // $FlowFixMe[incompatible-type]
+    return {};
+  }
+
   beforeEach(() => {
     jest.resetModules();
     jest.restoreAllMocks();
@@ -1620,6 +1625,94 @@ describe('Native Animated', () => {
       );
     });
 
+    it('disconnects the previous native view before connecting a replacement', () => {
+      const findNodeHandle = jest
+        .fn()
+        .mockReturnValueOnce(11)
+        .mockReturnValueOnce(22);
+      jest.setMock('../../../../Libraries/ReactNative/RendererProxy', {
+        findNodeHandle,
+      });
+      const {Animated} = importModules();
+      const AnimatedProps =
+        require('../../../../Libraries/Animated/nodes/AnimatedProps').default;
+      const firstView = createViewInstance();
+      const secondView = createViewInstance();
+      const opacity = new Animated.Value(1);
+      const propsNode = new AnimatedProps({style: {opacity}}, jest.fn());
+      propsNode.__attach();
+      propsNode.setNativeView(firstView);
+      propsNode.__makeNative();
+      const propsTag = propsNode.__getNativeTag();
+
+      propsNode.setNativeView(secondView);
+
+      expect(
+        NativeAnimatedModule.connectAnimatedNodeToView,
+      ).toHaveBeenNthCalledWith(1, propsTag, 11);
+      expect(
+        NativeAnimatedModule.disconnectAnimatedNodeFromView,
+      ).toHaveBeenCalledWith(propsTag, 11);
+      expect(
+        NativeAnimatedModule.connectAnimatedNodeToView,
+      ).toHaveBeenNthCalledWith(2, propsTag, 22);
+      expect(
+        // $FlowFixMe[prop-missing]
+        NativeAnimatedModule.disconnectAnimatedNodeFromView.mock
+          .invocationCallOrder[0],
+      ).toBeLessThan(
+        // $FlowFixMe[prop-missing]
+        NativeAnimatedModule.connectAnimatedNodeToView.mock
+          .invocationCallOrder[1],
+      );
+
+      propsNode.setNativeView(secondView);
+      expect(
+        NativeAnimatedModule.connectAnimatedNodeToView,
+      ).toHaveBeenCalledTimes(2);
+      expect(
+        NativeAnimatedModule.disconnectAnimatedNodeFromView,
+      ).toHaveBeenCalledTimes(1);
+
+      propsNode.__detach();
+      expect(
+        NativeAnimatedModule.disconnectAnimatedNodeFromView,
+      ).toHaveBeenNthCalledWith(2, propsTag, 22);
+      expect(findNodeHandle).toHaveBeenCalledTimes(2);
+    });
+
+    it('only connects the latest view when switching to the native driver', () => {
+      jest.setMock('../../../../Libraries/ReactNative/RendererProxy', {
+        findNodeHandle: () => 22,
+      });
+      const {Animated} = importModules();
+      const AnimatedProps =
+        require('../../../../Libraries/Animated/nodes/AnimatedProps').default;
+      const opacity = new Animated.Value(1);
+      const propsNode = new AnimatedProps({style: {opacity}}, jest.fn());
+      propsNode.__attach();
+      propsNode.setNativeView(createViewInstance());
+      propsNode.setNativeView(createViewInstance());
+      expect(
+        NativeAnimatedModule.connectAnimatedNodeToView,
+      ).not.toHaveBeenCalled();
+      expect(
+        NativeAnimatedModule.disconnectAnimatedNodeFromView,
+      ).not.toHaveBeenCalled();
+
+      propsNode.__makeNative();
+      expect(
+        NativeAnimatedModule.connectAnimatedNodeToView,
+      ).toHaveBeenCalledTimes(1);
+      expect(
+        NativeAnimatedModule.connectAnimatedNodeToView,
+      ).toHaveBeenCalledWith(propsNode.__getNativeTag(), 22);
+      expect(
+        NativeAnimatedModule.disconnectAnimatedNodeFromView,
+      ).not.toHaveBeenCalled();
+      propsNode.__detach();
+    });
+
     it('creates new props, style and transform nodes at update', async () => {
       const {Animated} = importModules();