-
-
Notifications
You must be signed in to change notification settings - Fork 283
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
[bug] ["with fix"] onSnapToItem not properly called #604
Comments
The issue with
Regarding the SDK upgrade and its potential impact, it's worth noting that recent changes and fixes in To address the issue, consider reviewing and adjusting the carousel's animation configurations, enhancing event handling logic for rapid swipes, and ensuring robust state management for accurate index tracking. Also, explore recent changes in the SDK and component library that might affect animation and event handling behavior. If the problem persists, providing more details about your implementation could help in identifying specific solutions.
|
Btw, this line is driving me crazy: |
As you may imagine, if I add this: function setSharedIndex(newSharedIndex: number) {
sharedIndex.current = newSharedIndex;
onScrollEnd(); // <<< THIS!
} It fixes the issue... But the |
I just fixed it doing this: const _onScrollEnd = React.useCallback(() => {
setTimeout(() => { // <<< PLEASE DON'T KILL ME!!! DON'T TELL MY MOM!!!
const _sharedIndex = Math.round(getSharedIndex());
const realIndex = computedRealIndexWithAutoFillData({
index: _sharedIndex,
dataLength: rawDataLength,
loop,
autoFillData,
});
if (onSnapToItem) onSnapToItem(realIndex);
if (onScrollEnd) onScrollEnd(realIndex);
}, 1)
}, [
loop,
autoFillData,
rawDataLength,
getSharedIndex,
onSnapToItem,
onScrollEnd,
]); |
Ugh. I'm pretty sure you're right about this being a race condition due to how code is being called (really, scheduled) via @BrodaNoel - How are you "moving to the next photo REALLY FAST"? Are you just panning extremely quickly to the next slide? Although I agree with you about wanting to get the value for this callback fixed properly, could using the (And, yes, as you mention in the initial comment, my animations are good 👍, and I am using Expo SDK 50. But I do have a number of patches for RNRC installed, including #574, #576, #577, and #596.) |
Yes, in order to swipe fast, I just do it super quickly with my finger. The point is that you don't REALLY have to do it super fast. But you can reproduce it easier in that way. |
Describe the bug
Ok... Here I could reproduce the error: https://youtu.be/KADZzaGaUJM
The sum-up of that video is this: If I move to the next photo REALLY FAST, the onSnapToItem function gets called with the previous index. I mean, if I move from photo index 0 to the next (photo index 1), onSnapToItem is called with index = 0.
But, if I move to the next photo SLOW, the onSnapToItem gets called properly.
PS.: I'm not 100% sure if this issue is because of this PR, but I have this PR patched in my local env right now. I may have to remove the patch and try without it, but I can't because I see other issues.
The error
After adding 3 million
console.log
in theRNRC
code, I have finally found the problem.This is what I get in the console:
(scroll to the right and see the new index, at the end of the console lines)
So... Seems like
2nd parameter of
useAnimatedReaction(the one who uses newSharedIndexValue)
is ran after_onScrollEnd
Now...
Please check this in the vide: When I release my finger from the phone, there is no animation to the next item. It's like... Since I upgraded to SDK 50, there is no animation anymore from the moment I release the finger (where the Carousel should finish to move to the next image with an animation)... This make me think that probably there are some broken thing in a higer lever, who produces this error.
I've seen that other devs, like @nmassey does not have this problem. He has SDK 50, and the animations still smooth...
Versions (please complete the following information):
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-reanimated": "~3.6.2",
"react-native-reanimated-carousel": "4.0.0-alpha.12",
"react-native-gesture-handler": "~2.14.0",
Smartphone (please complete the following information):
The text was updated successfully, but these errors were encountered: