Animated.sequence `undefined is not an object (evaluating 'animations[current].start')`

[Jackman3005]

Description

From what I can tell, I am essentially running into the same problem as a prior closed issue. Which had a PR created to "fix" the issue, but was eventually closed without being merged.

I too (think) am running into the issue described before. I receive the following error in an unknown situation:

undefined is not an object (evaluating 'animations[current].start')

I am not certain of the root cause of it. Quite possibly it is as @hansencj06 described on the PR in 2020.

It is challenging to extract a minimal reproduction. But I can tell you that I essentially am animating a button to full width (normal) or a circle (loading state).

However, I am stopping and starting the two different animation sequences (animateToCircle, animateToButton) in a useEffect based on incoming states. i.e. If the incoming prop is loading=true and I'm in the process of animating from a button to a circle when I receive updated props loading=false I will then interrupt the animation to a circle and begin the animation back to a button again.

The animation related code is as follows:

const borderColorAnim = useRef(
    new Animated.Value(loading || success ? 0 : 1)
  ).current;
  const widthAnim = useRef(
    new Animated.Value(loading || success ? 0 : 1)
  ).current;
  const buttonTextOpacityAnim = useRef(
    new Animated.Value(loading || success ? 0 : 1)
  ).current;

  const animateToCircle = useRef(
    Animated.sequence([
      Animated.parallel([
        Animated.timing(widthAnim, {
          toValue: 0,
          duration: 300,
          easing: Easing.in(Easing.ease),
          useNativeDriver: false,
        }),
        Animated.timing(buttonTextOpacityAnim, {
          toValue: 0,
          useNativeDriver: false,
        }),
      ]),
      Animated.timing(borderColorAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false,
        easing: Easing.in(Easing.ease),
      }),
    ])
  ).current;
  const animateToButton = useRef(
    Animated.sequence([
      Animated.parallel([
        Animated.timing(borderColorAnim, {
          toValue: 1,
          duration: 300,
          useNativeDriver: false,
          easing: Easing.in(Easing.ease),
        }),
        Animated.timing(widthAnim, {
          toValue: 1,
          duration: 300,
          easing: Easing.in(Easing.ease),
          useNativeDriver: false,
        }),
      ]),
      Animated.timing(buttonTextOpacityAnim, {
        toValue: 1,
        duration: 100,
        easing: Easing.in(Easing.ease),
        useNativeDriver: false,
      }),
    ])
  ).current;

  const previousButtonStateRef = useRef(buttonState);
  useEffect(() => {
    const previousButtonState = previousButtonStateRef.current;
    previousButtonStateRef.current = buttonState;

    if (
      ["ANIMATING_TO_SUCCESS", "ANIMATING_TO_LOADING"].includes(buttonState)
    ) {
      if (
        !["ANIMATING_TO_SUCCESS", "ANIMATING_TO_LOADING"].includes(
          previousButtonState
        )
      ) {
        animateToButton.stop();
        animateToCircle.start(({ finished }) => {
          if (finished) {
            setState(
              previousButtonStateRef.current === "ANIMATING_TO_LOADING"
                ? "LOADING"
                : "SUCCESS"
            );
          }
        });
      }
    } else if (buttonState === "ANIMATING_TO_NORMAL") {
      animateToCircle.stop();
      animateToButton.start(({ finished }) => {
        if (finished) {
          setState("NORMAL");
        }
      });
    } else {
      animateToCircle.reset();
      animateToButton.reset();
      widthAnim.setValue(loading || success ? 0 : 1);
      borderColorAnim.setValue(loading || success ? 0 : 1);
      buttonTextOpacityAnim.setValue(loading || success ? 0 : 1);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [buttonState]);

Possibly I am misusing animations here and would welcome any suggestions on the "correct" way to accomplish this.

Steps to reproduce

Again, not 100% certain how to do this reliably, although a reproduction was provided in the original issue that should suffice hitting this scenario.

React Native Version

0.72.4

Affected Platforms

Runtime - Web

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 127.67 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/workspace/qm-universe/node_modules/.bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/jack/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 18.0.2
    path: /Users/jack/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/jack/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

TypeError

undefined is not an object (evaluating 'animations[current].start')

Reproducer

https://github.com/facebook/react-native/issues/17699

Screenshots and Videos

No response

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.10. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[Jackman3005]

The PR that was closed does not seem like it would be a "bad" thing to include, as it is only a check that only avoids throwing error in an unexpected scenario.

[react-native-bot]

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.

[react-native-bot]

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