`Animated.Value` resets styles when detached on RN 0.70.0

Description

When Animated.Value in styles gets replaced by a constant value, the Animated.Node gets correctly detached, however, the new value is not assigned - the prop gets restored to its default value. It only happens when using native drivers, when running animation with useNativeDriver: false it works correctly.

Behavior on React Native 0.70.0:

rn70.webm

Correct behavior on React Native 0.69.5:

rn69.webm

Related issue: https://github.com/software-mansion/react-native-gesture-handler/issues/2208

Version

0.70.0

Output of npx react-native info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 109.94 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
    Watchman: 2022.08.08.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/lib/ruby/gems/3.0.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 24, 26, 28, 29, 30, 31, 32, 33
      Build Tools: 26.0.3, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-28 | Google ARM64-V8a Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.0 => 0.70.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Run the code below and press the Animate button. When the animation ends the view snaps to the edge of the screen instead of staying in place.

Snack, code example, screenshot, or link to a repository

import React, {useRef, useState} from 'react';
import {View, Animated, Button} from 'react-native';

export default function App() {
  const value = useRef(new Animated.Value(0)).current;
  const [useAnimatedValue, setUseAnimatedValue] = useState(false);

  function animate() {
    value.setValue(0);
    setUseAnimatedValue(true);
    Animated.spring(value, {
      toValue: 1,
      bounciness: 3000,
      velocity: 0.5,
      useNativeDriver: true,
    }).start(({finished}) => {
      if (finished) {
        setUseAnimatedValue(false);
      }
    });
  }

  const offset = useAnimatedValue
    ? value.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 250],
        extrapolate: 'clamp',
      })
    : 250;

  return (
    <View style={{flex: 1}}>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'red',
          transform: [{translateX: offset}],
        }}
      />
      <Button
        title="Animate"
        onPress={() => {
          animate();
        }}
      />
    </View>
  );
}

[j-piasecki]

@javache Thank you for fixing this. Your PR seems to be fixing the drawer layout issue.

[javache]

#34927 attempts to resolve this issue by enabling the new behaviour only on Fabric. I verified this resolves the repro given here, but would appreciate help testing other scenarios too (eg the drawerlayout issue)