Change in 'key' prop leads to reset to original style/animated value after animating a view in 0.72

[krdc]

Description

After executing an animation (such as Animated.timing) with useNativeDriver set to true, changing the "key" prop (which causes a remount) in a child view, that utilizes the animated value, results in a reset to the view's original style. The updated Animated.Value is not being reflected in the UI.

This bug seems to be specific to version 0.72.

Note: This issue bears similarity to #34665, but the bug I am reporting only occurs in version 0.72 and exclusively upon changing the "key" prop (remounting vs replacing the style). This suggests potentially different root causes.

https://github.com/facebook/react-native/assets/5274340/c210afb1-d769-45cc-a012-f149f7f0334c

As you can see the view jumps back to its original position (after key change).

https://github.com/facebook/react-native/assets/5274340/ce0bd8ff-8c43-4d0d-b56e-0831ce6ef0d3

(Note: recorded in 0.70, but same result in 0.71)

React Native Version

0.72.3

Output of npx react-native info

System:
  OS: macOS 13.4.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 308.67 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.4.0
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2023.07.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.1 AI-211.7628.21.2111.8193401
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.16.1
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /opt/homebrew/opt/ruby@2.7/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Initialise a simple animation with Animated.Timing (useNativeDriver: true) from value 0 to 10.
2. Create an Animated.View that employs a style which interpolates the animation value as needed.
3. Set the "key" prop of the view to reference some part of the state.
4. Upon completion of the animation, use the callback to modify the state (while keeping the Animated.Value constant) and thus the "key" prop of the Animated.View.

Expected result: The Animated.View should reflect the updated Animated.Value.

Actual result: In 0.72, The Animated.View reverts to its original display, ignoring the changes in Animated.Value. Inspecting the value with devtools confirms the value is indeed at 10, but the expected interpolated style is not being applied.

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

https://snack.expo.dev/@kducros/trusting-banana

Note: As of time of posting, Snack has not been updated to Expo SDK 49 (with RN 0.72), so this shows expected behaviour.

The example below has a simple animation, and sets the state on completion, which is used in the "key" prop.

App.js:

import { useState, useRef } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Animated } from 'react-native';

const boxSize = 100;

export default function App() {

  const [hasAnimated, setHasAnimated] = useState(false);
  const animation = useRef(new Animated.Value(0)).current; 

  const resetExample = () => {
    animation.setValue(0);
    setHasAnimated(false);
  }

  const startBoxAnimation = () => {
    Animated.timing(animation, {
      toValue: 10,
      duration: 750,
      useNativeDriver: true
    }).start(() => {
      setHasAnimated(true);
    });
  }

  return (
    <View style={styles.container}>
      <View style={styles.buttons}>
        <TouchableOpacity disabled={hasAnimated} style={[styles.button, { opacity: hasAnimated ? 0.5 : 1}]} onPress={() => startBoxAnimation()}>
          <Text>Start</Text>
        </TouchableOpacity>
        <TouchableOpacity disabled={!hasAnimated} style={[styles.button, { opacity: !hasAnimated ? 0.5 : 1}]} onPress={() => resetExample()}>
          <Text>Reset</Text>
        </TouchableOpacity>
      </View>
      <Animated.View style={styles.boxFinalPosition}>
        {hasAnimated && <Text style={styles.textDesc}>Animated view should be at destination</Text>}
      </Animated.View>
      <Animated.View key={`box_${hasAnimated ? 'moved' : 'initial'}`} style={[styles.boxAnimated, {
        transform: [
          {
            translateY: animation.interpolate({
              inputRange: [0, 10],
              outputRange: [0, 150]
            })
          }
        ]
      }]}>
        <Animated.View style={[styles.boxInner, {
          opacity: animation.interpolate({
            inputRange: [0, 10],
            outputRange: [0, 1]
          })
        }]} />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttons: {
    position: 'absolute',
    bottom: 75,
    flexDirection: 'row', 
  },
  button: {
    backgroundColor: '#eee',
    padding: 20,
    margin: 2
  },
  boxAnimated: {
    position: 'absolute',
    top: 250,
    width: boxSize,
    height: boxSize,
    backgroundColor: 'red',
    overflow: 'hidden'
  },
  boxInner: {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'blue',
  },
  boxFinalPosition: {
    position: 'absolute',
    top: 400,
    width: boxSize,
    height: boxSize,
    backgroundColor: '#eee',
    borderWidth: 3,
    borderStyle: 'dashed',
  },
  textDesc: {
    width: boxSize,
    height: boxSize,
    position: 'absolute',
    top: 120,
    color: '#000',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 10
  }
});

[github-actions[bot]]

:warning:	Add or Reformat Version Info
:information_source:	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[krdc]

⚠️ Add or Reformat Version Info ℹ️ We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

Fixed.

[krdc]

Submitted (first ever) pull request with a fix. It appears to pass all tests and fixes the above issue - but I must admit that my knowledge of how native animation works is limited - hope this doesn't cause issues...

The pull request has a minor change to the way useAnimatedProps works.

I found the underlying issue was related to a change in 0.72, with the migration to an improved useAnimatedProps. Prior to 0.72, createAnimatedComponent.js (which had some of the functionality that is now in useAnimatedProps) attached the animated node instantly in UNSAFE_componentWillMount. This seemed to be missing from the updated useAnimatedProps, which attached node only via useLayoutEffect, and created issues with natively animated components after remounting via a "key" change.

[krdc]

As a note: this issue is still present in React Native 0.74.1. Despite being a bit of an anti-pattern fix, Im using a patch derived from the linked PR in production without any noticeable issues so far. Looking forward to a better alternative though.