RCTNativeAnimatedNodesManager.mm props is not a node #44072
Labels
API: Animated
Issue: Author Provided Repro
This issue can be reproduced in Snack or an attached project.
Description
On iOS using version 0.73.6 I'm encountering several errors coming from
RCTNativeAnimatedNodesManager.mm
. Particularly when updating or unmounting<Animated.*>
components. These errors seem to throw whenever updating or unmounting a component that is potentially in an animated state - be it the component style or display values (for text).The errors will throw in a small demo I've put together that'll allow you to toggle on and off a
shouldComponentUpdate()
method and trigger the error. The demo effectively updates the font-size and/or text of an animating node (causing the error) or prevents the error when theshouldComponentUpdate()
is active.It's likely that these errors were never designed to be propagated to the JS runtime, leading me to believe there's something larger at play here. There's a similar open issue for the same module on android that may support the notion that the bug is likely a layer or two deeper.
I've tried several steps to isolate the bug:
The bug is consistent across each of these steps - so it's likely not a problem with react or variations in JS runtimes.
Steps to reproduce
git clone git@github.com:alexfigliolia/reproducer-react-native.git demo
git clone git@github.com:alexfigliolia/react-native-counter-animation.git
cd
intoreact-native-counter-animation
and add the following to theAnimatedNumber.tsx
module:Token.tsx
module:The above lines will allow a parent component to update the style of animating nodes while an animation is running. With those lines added, we can package up the code and add it to the demo app.
In
react-native-counter-animation
runyarn install && yarn build
Add
react-native-counter-animation
to the demo application's package.json:cd
into the demo application and runThe app is going to open into a screen with a little graph and counter animation. The corresponding module can be located by searching for
<RepairProgress />
and clicking through to the component.In the component you'll see some code that sends text updates to the counter component on a timer which will throw the error in question as long as renders are not being blocked. The errors will disappear again if the
shouldComponentUpdate
's from the prior steps are restored to blocking updates.To show that this bug is not limited just to textual changes, there is a
{fontSize !== null && ...}
on line 36 of theRepairProgress
component that you can remove - allowing the component to calculate it's font-size and update it while the component is mounted. Turning this off will also recreate the error as long as the font size is initialized in some reactive way (theres auseState
on line 14 that can be initialized to ~20 instead ofnull
at the top of the component).I can be available for debugging. Please let me know if you need me :)
React Native Version
0.73.6
Affected Platforms
Runtime - iOS
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/alexfigliolia/reproducer-react-native
Screenshots and Videos
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-04-13.at.09.43.35.mp4
The text was updated successfully, but these errors were encountered: