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

j-piasecki · 2022-09-12T10:34:09Z

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>
  );
}

The text was updated successfully, but these errors were encountered:

lunaleaps · 2022-09-26T16:50:11Z

To clarify is this an Android only issue? Ah it seems in software-mansion/react-native-gesture-handler#2208 it appears on both platforms

lunaleaps · 2022-09-26T20:39:35Z

Will take a look over 0.70 PRs that may have affected later today, or if anyone has leads, please share!

javache · 2022-09-27T10:39:08Z

Could this be due to d8c25ca? Could you try backing it out to validate?

kelset · 2022-10-03T10:29:38Z

@lunaleaps / @javache any updates on this?

lunaleaps · 2022-10-04T22:56:41Z

Confirmed reverting relevant changes d8c25ca? fixes the issue and that it's only reproducible non-Fabric

kelset · 2022-10-05T09:17:28Z

@lunaleaps is there already a "revert commit" in main? I'd rather cherry-pick that then do a revert locally in 0.70-branch

lunaleaps · 2022-10-05T16:59:32Z

I'm not sure we can easily revert, it fixes an issue on Fabric. I'm trying some superficial attempts at fixing forward as the author is not in office right now. @javache if you have more ideas?

javache · 2022-10-10T14:49:21Z

#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)

Summary: Pull Request resolved: #34927 The changes made in D36902220 (a041951) and D36958882 (d8c25ca) attempted to reduce flickering and consistency issues when using Animated. In the old renderer, we explicitly reset all animated props, and wait for the subsequent React commit to set the props to the right state, but if `initialProps` are used, the React reconciliation may not be able to identify the prop-update is required and will leave out the value. This behaviour is different in the new renderer, where we do not explicitly `restoreDefaultValues` on detaching the animated node, and instead rely on the latest state being correct(?). Changelog: [General][Fixed] Stop styles from being reset when detaching Animated.Values in old renderer Fixes #34665 Reviewed By: rshest Differential Revision: D40194072 fbshipit-source-id: 1b3fb1d1f4a39036a501a8a21e57002035dd5659 # Conflicts: # Libraries/Animated/createAnimatedComponent.js

j-piasecki · 2022-10-11T12:43:26Z

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

j-piasecki · 2022-12-07T10:32:53Z

@javache @lunaleaps Sorry for the ping, but I've missed a case where an ongoing animation gets interrupted and a new one starts from the position where the old one got interrupted. Here's how it looks:

device-2022-12-07-112210.mp4

If I let the animation finish it behaves correctly, however, if I tap the button twice, the view snaps to the edge of the screen instead of staying where the animation finished.

Here's the updated reproduction

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 isMoved = useRef(false);
  const [useAnimatedValue, setUseAnimatedValue] = useState(false);

  function animate() {
    setUseAnimatedValue(true);
    isMoved.current = !isMoved.current;
    Animated.spring(value, {
      toValue: isMoved.current ? 1 : 0,
      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',
      })
    : isMoved.current
    ? 250
    : 0;

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

kelset · 2022-12-07T10:37:05Z

I'll open the issue again, @javache can you give this a look if you have a moment?

lunaleaps · 2022-12-07T19:11:49Z

Trying to clarify the urgency of this -- @j-piasecki, @kelset this is still breaking DrawerLayout for 0.70 re: software-mansion/react-native-gesture-handler#2208?

cc @genkikondo

j-piasecki · 2022-12-07T21:07:53Z

@lunaleaps Yes, it's still breaking DrawerLayout

javache · 2022-12-08T23:30:33Z

Does this apply to RN latest? We've landed 5cdf3cf last month which switches out the implementation of Animated to be concurrent-safe and may have different behaviour.

j-piasecki · 2022-12-09T08:07:20Z

If by latest you mean 0.70.6 then yes, it's also broken there, but if you mean 0.71.0-rc.3 then it works as expected.

kelset · 2022-12-09T10:14:30Z

yeah I think @javache means 0.71 - good to hear that it works there, I wonder if we need to attempt to cherry-pick that commit on 0.70

j-piasecki · 2023-01-13T09:34:18Z

If by latest you mean 0.70.6 then yes, it's also broken there, but if you mean 0.71.0-rc.3 then it works as expected.

I don't exactly remember now, but it seems like I've checked only the new architecture (where the behavior is correct), but on the old architecture it's still broken. I'm really sorry for the confusion.

kelset · 2023-01-13T10:09:20Z

If by latest you mean 0.70.6 then yes, it's also broken there, but if you mean 0.71.0-rc.3 then it works as expected.

I don't exactly remember now, but it seems like I've checked only the new architecture (where the behavior is correct), but on the old architecture it's still broken. I'm really sorry for the confusion.

on which version of RN did you do that test? 0.70 or 0.71? can you try with 0.71.0? We released it yesterday

j-piasecki · 2023-01-16T08:23:21Z

I tried it on 0.71.0, and while it works as expected on the new architecture, on the old arch the layout jump is still visible. This applies to both, Android and iOS.

Summary: Pull Request resolved: facebook#34927 The changes made in D36902220 (facebook@a041951) and D36958882 (facebook@d8c25ca) attempted to reduce flickering and consistency issues when using Animated. In the old renderer, we explicitly reset all animated props, and wait for the subsequent React commit to set the props to the right state, but if `initialProps` are used, the React reconciliation may not be able to identify the prop-update is required and will leave out the value. This behaviour is different in the new renderer, where we do not explicitly `restoreDefaultValues` on detaching the animated node, and instead rely on the latest state being correct(?). Changelog: [General][Fixed] Stop styles from being reset when detaching Animated.Values in old renderer Fixes facebook#34665 Reviewed By: rshest Differential Revision: D40194072 fbshipit-source-id: 1b3fb1d1f4a39036a501a8a21e57002035dd5659

github-actions · 2023-09-05T05:40:46Z

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-09-27T05:41:01Z

This issue was closed because it has been stalled for 7 days with no activity.

shubhamguptadream11 · 2023-10-19T07:39:19Z

It still exists on react native: 0.72.4. Any suggestions I tries useNativeAnimations={false}. This fix is working but I don't want to do this. Also if this issue is happening on non fabric variant also so why this is fixed on only on fabric part?

j-piasecki added the Needs: Triage 🔍 label Sep 12, 2022

react-native-bot added the API: Animated label Sep 12, 2022

renchap mentioned this issue Sep 16, 2022

DrawerLayout broken on RN 0.70 software-mansion/react-native-gesture-handler#2208

Closed

lunaleaps added Platform: iOS iOS applications. Platform: Android Android applications. labels Sep 26, 2022

lunaleaps self-assigned this Sep 26, 2022

kelset added Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. and removed Needs: Triage 🔍 labels Oct 3, 2022

javache mentioned this issue Oct 10, 2022

Apply Animated initialProps handling to Fabric only #34927

Closed

facebook-github-bot closed this as completed in 2f58e52 Oct 11, 2022

kelset reopened this Dec 7, 2022

krdc mentioned this issue Jul 19, 2023

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

Open

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 5, 2023

github-actions bot closed this as completed Sep 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

j-piasecki commented Sep 12, 2022

lunaleaps commented Sep 26, 2022 •

edited

Loading

lunaleaps commented Sep 26, 2022

javache commented Sep 27, 2022

kelset commented Oct 3, 2022

lunaleaps commented Oct 4, 2022 •

edited

Loading

kelset commented Oct 5, 2022

lunaleaps commented Oct 5, 2022

javache commented Oct 10, 2022

j-piasecki commented Oct 11, 2022

j-piasecki commented Dec 7, 2022

kelset commented Dec 7, 2022

lunaleaps commented Dec 7, 2022

j-piasecki commented Dec 7, 2022

javache commented Dec 8, 2022

j-piasecki commented Dec 9, 2022

kelset commented Dec 9, 2022

j-piasecki commented Jan 13, 2023

kelset commented Jan 13, 2023

j-piasecki commented Jan 16, 2023

github-actions bot commented Sep 5, 2023

github-actions bot commented Sep 27, 2023

shubhamguptadream11 commented Oct 19, 2023 •

edited

Loading

Animated.Value resets styles when detached on RN 0.70.0 #34665

Animated.Value resets styles when detached on RN 0.70.0 #34665

Comments

j-piasecki commented Sep 12, 2022

Description

Version

Output of npx react-native info

Steps to reproduce

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

lunaleaps commented Sep 26, 2022 • edited Loading

lunaleaps commented Sep 26, 2022

javache commented Sep 27, 2022

kelset commented Oct 3, 2022

lunaleaps commented Oct 4, 2022 • edited Loading

kelset commented Oct 5, 2022

lunaleaps commented Oct 5, 2022

javache commented Oct 10, 2022

j-piasecki commented Oct 11, 2022

j-piasecki commented Dec 7, 2022

kelset commented Dec 7, 2022

lunaleaps commented Dec 7, 2022

j-piasecki commented Dec 7, 2022

javache commented Dec 8, 2022

j-piasecki commented Dec 9, 2022

kelset commented Dec 9, 2022

j-piasecki commented Jan 13, 2023

kelset commented Jan 13, 2023

j-piasecki commented Jan 16, 2023

github-actions bot commented Sep 5, 2023

github-actions bot commented Sep 27, 2023

shubhamguptadream11 commented Oct 19, 2023 • edited Loading

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

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

Output of `npx react-native info`

lunaleaps commented Sep 26, 2022 •

edited

Loading

lunaleaps commented Oct 4, 2022 •

edited

Loading

shubhamguptadream11 commented Oct 19, 2023 •

edited

Loading