[kirillzyusko]

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:

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:

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
before.mp4	after.mp4

[kirillzyusko]

Hey @cipolleschi 👋

Would it be possible to have a look on this PR? Or tag a person who knows Animated API and can review this PR? 🙏

[kirillzyusko]

Hey @tomekzaw

Maybe you can review this PR? Or someone from SWM? I know that Animated is not part of your primary area (because you maintain reanimated), but anyway, it's related to animations 🤷‍♂️

Or maybe you know whom I should tag here to bring this PR to attention?..

[tomekzaw]

Hey @kirillzyusko, I asked @bartlomiejbloniarz to take a look

[kirillzyusko]

Thank you @tomekzaw ❤️

[meta-codesync]

@bartlomiejbloniarz has imported this pull request. If you are a Meta employee, you can view this in D128344147.

[react-native-bot]

This pull request was successfully merged by @kirillzyusko in 856661f

^{When will my fix make it into a release? | How to file a pick request?}