-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[iOS] Animations don't always run on component initialization #3296
Comments
I can confirm the bug, the console.log trick. It also affect moti. I'll test the PR and report back EDIT: also affects android so the PR won't fix all EDIT2: The PR doesn't fix this issue on iOS for me at least. |
My issue is in fact the same as : #3209. Maybe related? |
A few clues (and maybe the reason why console.log fixes it): setting I believe this is also why |
Since setting react-native-reanimated/Common/cpp/Tools/Mapper.cpp Lines 25 to 50 in 150e787
maybe some kind of race condition with unfortunately i don't know C++ (yet 😛) so this may be about as far as i can go |
@piaskowyk I think the issue has something to do with the performance optimazations or shared styles here: #1470 |
Can you try it again now that #3374 is merged? It looks like the same behaviour. |
…ker component. (#889) ## ✅ What's done - [x] Fixed an issue where animations were not executed in the Picker component. - related issue - software-mansion/react-native-reanimated#3296 - [x] Change DateTimePicker animation duration to the same value(300msc) as SelectPicker
I can confirm. The explanation @computerjazz gave here looks correct, because any function call (not just
causes the style to update propertly. I applied the changes here, but it did not fix the problem. |
has anyone found a fix for that? |
You can use v1 until they fix v2 in v3 |
it worked with version 2.2.1 |
I mean you can use v1 API with the latest version of reanimated, it doesn't have this bug, at least i haven't been able to reproduce it once i rewrote the affected component with V1 API. |
https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/declarative the same API is still available in 2.x, except |
got it! |
well, not sure why you'd need to use another abstraction when reanimated itself is already very straightforward to use |
make the process even easier :) |
maybe not that many people try to animate height/width of components |
Short update to notice that this issue can be reproduced on 2.11.0 and also affects android device (I use android tv, but should not impact behavior). workaround here: #3296 (comment) also fix the issue. |
I am facing the same issue in v2.8.0. |
simplest reproduction case
delaying adding
this works perfectly fine |
Any update on this? I am suffering from the same issue with a fade in animation that is triggered on component mount in useEffect. console.logging the shared value is my only current work around. just triggering a () => {} function call does not solve my issue |
This still happens in reanimated version |
I had this crash happen when changing the content size of a scroll view when it was being animated and the content size changing affecting the current viewport. I solved this by delaying my content change until the scroll animation was completed. still not ideal :( |
Weird workaround(hopefully it will work for you) Observation:Problems are with sudden changes during initialization.
Solution(for sudden changes) Not so good
This solution works for me, as it also has 0 total duration, and somehow using sequence fixes issue. Problem: This works great when you are creating/rendering view, but if view is already there like on hot reload, screen will flicker. Because we are hiding view and again showing Better solution
|
tried the above, at first it looked like it worked, but it wasn't reliable and sometimes the height still wouldn't be set. Flickering was also still noticable when component fails to set height for the first part of the sequence. All in all it's the same as adding a timeout, only in this case the duration is random and depends on how long the 0 duration animation took to finish edit: nevermind, i had another component that i forgot to apply this method to inbetween two other components. It seems to be working reliably now! edit2: well it works but there is visible flickering sometimes, like 1 in 10 cases edit3: i don't know what happened or changed, but i cannot reproduce this anymore, not even my own example above, which now works fine without any workarounds, on both iOS 16.2 simulator and physical iPhone 13 Pro on iOS 15.7. I'm still on reanimated v3.3.0, edit4: no it still happens when JS thread is busy, with or without workarounds |
I ran into this issue on certain Android phones. It's really a race condition that manifests reliably on some phones. In my case, it was with Moti which uses Reanimated. I was on Reanimated v3.3.0. const anim = useDynamicAnimation(() => ({ opacity: 0 });
useEffect(function () {
anim.animateTo({ opacity: 1});
}, []);
return anim; It did help to add delays, or only run the initial onMount animation after a view's onLayout, but it still manifested. Just wanted to comment it wasn't an iOS-only issue for me. I'll update to see if I can trigger it with Reanimated raw API. |
@piaskowyk any ideas on what we can do to give a better repro given it's a race condition? |
Has anyone figured out a workaround for it so far? Above workarounds do not work always as @lightrow described. Edit: Here is a "hackish" workaround I came up with until it gets fixed. I run checks to see if the animation is applied inside an interval with a retry limit. It animates x, y position but can be adjusted to use width and height.
|
I know that this is an old issue, but could someone confirm whether this problem still exists in the latest version of Reanimated or if it has been resolved? |
Description
In reanimated 2.8.0, animations that run on component initialization don't always animate. I can't figure out why they work sometimes and don't work other times. The strangest thing is that adding a
console.log
withinuseAnimatedStyle
seems to fix the issue. Wrapping the call that sets the shared value to kick off the initial animation in asetTimeout
also seems to fix it (most of the time).This bug does not occur in 2.3.1.
I believe this is the underlying issue behind this
react-native-bottom-sheet
issue: gorhom/react-native-bottom-sheet#925Expected behavior
Animations run on component initialization.
(Below is with a
console.log
added inuseAnimatedStyle
):RPReplay_Final1655231771.MP4
Actual behavior & steps to reproduce
Create a component that has animations that run on initialization. Show/hide component. Animations run sometimes, but sometimes they just jump to final value (or partially animate).
(Without
console.log
inuseAnimatedStyle
):RPReplay_Final1655231740.MP4
Snack or minimal code example
Run on iOS device to see issue: https://snack.expo.dev/@computerjazz/reanimated-init-bug
Package versions
2.8.0
Affected platforms
The text was updated successfully, but these errors were encountered: