Change in 'key' prop leads to reset to original style/animated value after animating a view in 0.72 #38510
Description
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.
072.mp4
As you can see the view jumps back to its original position (after key change).
070.mp4
(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
- Initialise a simple animation with Animated.Timing (useNativeDriver: true) from value 0 to 10.
- Create an Animated.View that employs a style which interpolates the animation value as needed.
- Set the "key" prop of the view to reference some part of the state.
- 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
}
});