Animated.sequence undefined is not an object (evaluating 'animations[current].start') #43120
Description
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
Screenshots and Videos
No response