At 11:50 you made a crucial mistake, this callback runs on JS Thread and you should be using the `useAnimatedScrollHandler` from React Native Reanimated to run it directly the UI Thread (aka native side) and change FlatList to be an Animated.FlatList and modify the shared value inside the callback and keep everything on the UI Thread. Most probably Android is screaming in performance regression now :)
Hi Catalin, thanks a lot for pointing that out! Unfortunately while recording I missed that completely. In the latest videos fortunately I always used an Animated List with useScrollViewOffset or useAnimatedScrollHandler. I'll definitely fix the issue in the GitHub repo 🙌
Thank you very much for the feedback and for reporting the issue 🫣. I've fixed it on the repo right now by using the React Native Image (instead of the expo-image) and by using paddingLeft instead of translateX 👀
Hi @Reactiive, could you create a video about implementing a vertical circular carousel? The horizontal one isn't quite a circle, and I tried setting it up vertically on the left side, but I'm not sure what the issue might be.
I am having a problem with my Pangesture, I have a page that uses fastlist, for each item in it I use the Pangesture function to drag left to delete the item. The problem is that I can't scroll the page if I drag from a position inside the item, I can only scroll the page starting from outside the item
Nice! Do I understand right that the animation is highly rely on js thread since we are using offset from flatlist as base for the animation? So in case our js thread will be busy with something else - animation will freeze or at least not work in 60fps mode. Is there any way to link flatlist offset and reanimated right in ui thread without communicating via JavaScript? May be using reanimated worklets?
At 11:50 you made a crucial mistake, this callback runs on JS Thread and you should be using the `useAnimatedScrollHandler` from React Native Reanimated to run it directly the UI Thread (aka native side) and change FlatList to be an Animated.FlatList and modify the shared value inside the callback and keep everything on the UI Thread. Most probably Android is screaming in performance regression now :)
Hi Catalin, thanks a lot for pointing that out!
Unfortunately while recording I missed that completely. In the latest videos fortunately I always used an Animated List with useScrollViewOffset or useAnimatedScrollHandler. I'll definitely fix the issue in the GitHub repo 🙌
looks cool ☺
Thanks William, super appreciated 🎉
Thanks for remembering me bro...thank u so much for the video 🙂♥️
Such a cool animation 🔝
You are Amazing ❤
Thank you for the support 🎉
Great ! Make Stack Card Animation on upcoming tutorial with interpolate and lazy loading
Very useful tutorial
Hi @Reactiive. Works great on iOS. Couldn't get it to work on Android. We really like your tutorials. Keep up the good work. 👏
Thank you very much for the feedback and for reporting the issue 🫣.
I've fixed it on the repo right now by using the React Native Image (instead of the expo-image) and by using paddingLeft instead of translateX 👀
Oh wow. So fast. Will definitely check it out @@Reactiive
Were you able to adjust? Even with the latest changes, it keeps freezing on Android. Could someone help me, please?
@@sandromotter8440 yes for me too...is it worked now?... pls could any one help me with this
Very cool animation ... liked these subtitles tho... :))
Thanks a lot Bayram😅
Hi @Reactiive, could you create a video about implementing a vertical circular carousel? The horizontal one isn't quite a circle, and I tried setting it up vertically on the left side, but I'm not sure what the issue might be.
Que legal!! Muito bom amigo :D
Would you please make a video how to create a circular slider with reanimated 3?
Nothing really changes. You can use the same exact code :)
Hi! Thanks for the tutorial!! I didn't get why do we need to add pagingEnabled?
Can I use this animation to navigate to different screens?
I am having a problem with my Pangesture, I have a page that uses fastlist, for each item in it I use the Pangesture function to drag left to delete the item. The problem is that I can't scroll the page if I drag from a position inside the item, I can only scroll the page starting from outside the item
Nice!
Do I understand right that the animation is highly rely on js thread since we are using offset from flatlist as base for the animation?
So in case our js thread will be busy with something else - animation will freeze or at least not work in 60fps mode.
Is there any way to link flatlist offset and reanimated right in ui thread without communicating via JavaScript?
May be using reanimated worklets?
Hey sorry, I just read your comment. I just fixed that in the github source code by using an Animated.FlatList
Would be much cooler to use a Math formula such as atan to have a smoother circle. right now it's a triangle that we only see the top of it 😅