Animated.Value resets styles when detached on RN 0.70.0 #34665
Description
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: software-mansion/react-native-gesture-handler#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>
);
}