Thanks for this great video ! I haven't yet really got to play with animations, but you explain it very well. Already got an idea, can't wait to try it out !
Thanks. I was struggling with reanimated api because it was flickering at first frame with FlatList onScroll animation. Changed it to animated Api works great. Just have to change height animation to transform animaton bc of useNativeDriver
@@CatalinMironDev Would really love to buy your course on react animation if you create one without second thought. You can publish your course on Udemy or any other platforms and would definitely love to pay n learn for the quality of content you provide.
Hello Catlin , I have a Query please tell me Why have you taken this value const inputRange = [(index - 1) * width, index * width, (index + 1) * width]; in Item and this value const inputRange = [-width, 0, width]; in other places I'm really confused please help me out !!
Whenever I use the native driver, scrollX is never updated (remains at 0). When I set the native driver to false, the scrollX value becomes a very odd decimal number that changes every time I change slides (meaning a different number when I visit the same slide, for example the first slide starts at 0 but will then be 194.2422222 when I go back to it.). Does anyone know how I can overcome this issue?
Thanks for video . I have a question . Why are you using like this const scrollX = React.useRef(new Animated.Value(0)).current instead of const scrollX = new Animated.Value(0); ?
The reason is that useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. (reactjs.org/docs/hooks-reference.html) Thanks ✌️
you are doing great work my brother. but there is one issue , can you explain more or tell more how we handle the pagination bottom circle . because when i increase the number of items the circles also increase and it did not fit on the right bottoms it expands.
In this tutorial I am just showing how to create the animations, nothing more. If you'd like I can tackle this into a separate video, where we a dynamic pagination that support a variable range. Thanks for the feedback Chores ✌️
Thanks for this great tutorial. How can we change indicator color based on the color property from the data array? As I know borderColor isn't supported by Animated API, any ideas?
Unfortunately as you mentioned this is not supported by nativeDriver, so you need to make it false ‘useNativeDriver: false’ and based on scrollX position you can interpolate colors. Thanks Leri, Cheers ✌️
Just test it out. There are some benefits on using the nativeDriver but you can create another animated value that will not use nativeDriver and use it for color interpolation.
Thanks Yanis! I will think about some app that I can build from scratch but right now I am trying to create as much videos as possible with real life animations that can easily be applied to any project. It’s a great suggestion by the way.
Hi Catalin i was wondering , can React Native hide bottom navigation when scroll? I think header not to be hard , but i dont know how to implement hide bottom navigation when scrolling, hope you get the answer
This should work the same in plain React Native projects without Expo because I’m using only APIs exposed by react-native package. Did you had issues porting this to a plain react-native project? Thanks in advance Suleman!
Thank you . Its amazing to learn these stuffs so simple . I tried to implement the instagram multi picture pagination indicator but i don’t know how to set the inputs range and output range . Can you provide an example for me ?
I can do it, could you please share any animation or a link to the animation itself? I'm not using Instagram unfortunately so I don't know about what animations we're talking about :) Thanks a lot!
@@CatalinMironDev when I add scale to tranform image the image will go upside down! I don't know why! I thought the problem would be RTL and LTR but it wasn't.
Catalin, you really need to create a course about react native animations !! I'll be the first to buy it!
Amazing tutorial!!
I'll be the second
Good idea!
Good idea and maybe one day I'll be able to make it happen! Thank you Pedro, it means a lot to me!
@@CatalinMironDev Get on this! Would be a great idea
Pagaría por ello! 💪🏼💪🏼
I didn't know that all those dribbble stuffs were actually implementable. I'm still amazed by you teaching style
You are the guy that reveal the magic of RN animation! Thank you very much, now I know how these wonderful animations work.
DUDE!!! Thank you so much! I've stuck with this problem for a long time when need scale element depending on scroll position. But you help so much!
This video was so helpful for me some time ago. Recently I created a video applying the same concept but using Reanimated 2
You are one of my favorite and awesome tutor on RUclips
Respect Mirza ✌️
We are in support with you, Your content is really awesome and appreciated.......
I appreciate that! Many many thanks!
Thanks for this great video ! I haven't yet really got to play with animations, but you explain it very well. Already got an idea, can't wait to try it out !
Amazing Vicent! Please share it with us after you have it ready. Let me know if you need any help! Cheers!
Wonderful tutorial.. Please keep posting
Dude, you're incredible. Thanks for sharing your immense knowledge.
Thanks Catalin! Some animation hints were helpful for my app's animation!!
Amazing 😍 Thanks a lot✌️
Always admired your shared work on twitter. seeing you here gives me joy! SUBSCRIBED!
Awesome! Thank you Joshua ✌️
Best channel I’ve found in a long time
Thanks a lot ✌️
I am not going to miss any of your videos -
Is this good or bad? Because I want you to watch my videos. Please let me know what can I improve. Thanks Khalid ✌️
@@CatalinMironDev This is just too awesome stuff - I am learning every day from your tutorials.
Good content! Amazing instructor! 👏👏👏
thanks, dude for creating this video, I am new to React Native and was looking for a way to develop a carousel for a project I am working on.
Glad I could help! Don't forget to share it with us after you're done working on it. Thanks Furqan!
Tutorials are above being amazing. Theyare amazing++.
Thanks a lot Oguzhan! ✌️
This is reallllllllllly damn good!!! Please make a complete tutorial!!!!
I come here for learning animation, thank you very much
I’m glad you learned something. Thanks Duy ✌️
i like how you make it so simple, great tutorial
Thank you Mohamed!
This is really simple and awesome bro. Learned new things today. I love this video ❤️.
Thank you Ravi! I am glad that found it easy to follow and learned something new!
Mindblowing as usual 😍😍
🤯Thank you 🙏
Your tutorials are awesome man! Keep up the good work :)
Thank you 🙏
Thanks. I was struggling with reanimated api because it was flickering at first frame with FlatList onScroll animation. Changed it to animated Api works great. Just have to change height animation to transform animaton bc of useNativeDriver
Glad it helped! Thanks Necmettin ✌️
Very cool tutorial! Thanks for sharing it!!!
Thank you Pierre, I’m glad that you enjoyed it!
Amazing, u make things look so simple.
Thanks Naoufal! I’m glad you enjoyed it!
✌️
Thanks for you lessons, and work!
Glad you like them! Thanks Victor ✌️
@@CatalinMironDev ^-^
Learning awesome things from you everyday. Thanks for creating awesome content like this!!😄
I’m glad to hear this! Thanks Dixit ✌️
@@CatalinMironDev Would really love to buy your course on react animation if you create one without second thought. You can publish your course on Udemy or any other platforms and would definitely love to pay n learn for the quality of content you provide.
Great video, Thanks
Amazing content, Thank You
Great Video , Really Helpful
I’m glad you liked it Nishad! ✌️
Maaaan you're amazing, create a course about animations in React Native !!!
Thanks for the idea and I'm working on it. Thanks Pedro!
Hey thank you!! this video is amazing!!
Thank you Cayetano, I am glad that you liked it! ✌️
Hello Catlin ,
I have a Query please tell me
Why have you taken this value
const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
in Item and
this value
const inputRange = [-width, 0, width];
in other places
I'm really confused
please help me out !!
Fantastic
Whenever I use the native driver, scrollX is never updated (remains at 0). When I set the native driver to false, the scrollX value becomes a very odd decimal number that changes every time I change slides (meaning a different number when I visit the same slide, for example the first slide starts at 0 but will then be 194.2422222 when I go back to it.).
Does anyone know how I can overcome this issue?
Thanks for video . I have a question . Why are you using like this const scrollX = React.useRef(new Animated.Value(0)).current instead of const scrollX = new Animated.Value(0); ?
The reason is that useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).
The returned object will persist for the full lifetime of the component. (reactjs.org/docs/hooks-reference.html)
Thanks ✌️
@@CatalinMironDev Thanks
👏🏼👏🏼
Thanks Oscar, I’m glad that it helped you!
Great job 👍
Thank you Fanzana ✌️
Great catalin
Thanks a lot Nikhil, I'm glad you liked it! ✌️
@@CatalinMironDev iam also a full stack developer very informative videos you are publishing.
Nikhil Nainta I am glad that this is helping you, no matter what level you are. Thanks a lot for taking your time to check my videos ✌️
awesome!!!
Beautifull
AWESOME. im waiting for show hide header like Whatsapp with header and top tab
Great!
Legend!
Thank you! ✌️
great video
you are doing great work my brother. but there is one issue , can you explain more or tell more how we handle the pagination bottom circle . because when i increase the number of items the circles also increase and it did not fit on the right bottoms it expands.
In this tutorial I am just showing how to create the animations, nothing more. If you'd like I can tackle this into a separate video, where we a dynamic pagination that support a variable range. Thanks for the feedback Chores ✌️
@@CatalinMironDev brother you are doing great work. weldone but i suggest please make pagination dynamic
online.fliphtml5.com/vfrai/ysms/#p=1
Like this way?
Amazing content! You're a great tutor.
Thank you Mateo 🙏
My idol
Спасибо!
I Love the 🌵 in the background
Thanks Yasir! Shiny 🌵
Amazing tutorial! thankyou so much. I hope you make a Udemy course with bunch of animated case study :D
I'm working on creating a course about animations. I'll let you know once this is finished. Thanks a lot Rizaldi ✌️
cant we do the same thing in react native cli, i mean not in expo?
Thanks for this great tutorial. How can we change indicator color based on the color property from the data array? As I know borderColor isn't supported by Animated API, any ideas?
Unfortunately as you mentioned this is not supported by nativeDriver, so you need to make it false ‘useNativeDriver: false’ and based on scrollX position you can interpolate colors. Thanks Leri, Cheers ✌️
Will the animation be smooth without nativeDriver?
Just test it out. There are some benefits on using the nativeDriver but you can create another animated value that will not use nativeDriver and use it for color interpolation.
Just gotta figure an app to use it. Awesome work mate!
Thanks Daniel! In case you figure it out where to use it, please share the app with me, I’d love to see it in action.
✌️
you should make a course about RN animation
LMAO Just uploaded right now. I've been trying to find tutorials like this earlier. Thanks man!
Glad I could help! Thank John!
greate animating view big brain guy
good video!
kind of confusing that you didn't include us in the setup though.. you could've had a better tutorial if you started from scratch
Thanks so much ^^
You’re welcome!
You are a monster lol thanks for the video. Can you make a video how to create an app from scratch with Hooks etc .. ??
Thanks Yanis! I will think about some app that I can build from scratch but right now I am trying to create as much videos as possible with real life animations that can easily be applied to any project. It’s a great suggestion by the way.
Great video man, but I would recommend if you add a low background lo-fi music as the throat snapping when you are talking is sometimes annoying.
Thanks for the tip! Do you know at what volume should have the background music to avoid any issues?
@@CatalinMironDev Well anything lo-fi so it won't distract the viewers and at the same time it will make the long videos more entertaining.
Cpt Package that’s a great suggestion. I’ll try to apply it on my next video. Please share your feedback afterwards. Thanks a lot ✌️
Hi Catalin i was wondering , can React Native hide bottom navigation when scroll? I think header not to be hard , but i dont know how to implement hide bottom navigation when scrolling, hope you get the answer
I think it is possible, I have to try it tho but the immediate answer is yes:) thanks Kenzo
Thank you so much, hope you want to create a spcial video about it later . 👍
kindly make some videos in react native without expo and use cli
This should work the same in plain React Native projects without Expo because I’m using only APIs exposed by react-native package. Did you had issues porting this to a plain react-native project? Thanks in advance Suleman!
Thank you . Its amazing to learn these stuffs so simple .
I tried to implement the instagram multi picture pagination indicator but i don’t know how to set the inputs range and output range . Can you provide an example for me ?
I can do it, could you please share any animation or a link to the animation itself? I'm not using Instagram unfortunately so I don't know about what animations we're talking about :)
Thanks a lot!
@@CatalinMironDev i just find this example patricktran.github.io/react-magic-slider-dots/
Mohsen Soleimani I can do it:) I’ll add it to my list for future video tutorials. Thanks for sharing it with me!
@@CatalinMironDev How can I ever thank you enough. people like you are not easy to find.
You my brother are a LEGEND! Also highly underrated
Thumbs up man
Thank you so much Ade!
thanks bro
Any time John!
⭐⭐⭐⭐⭐ Rate
Thank you Danny ✌️
How to use it with tab navigator?..Btw Great work bro :)
Thanks Ameya. I don’t know to be honest. What issues you encounter?
Hello sir. please create a video of animated drawer.
I already created a tutorial for a drawer, also integrated in react-navigation v5. Please check my channel. Thanks ✌️
Hey, I'm new here in this channel. I'll subscribe to see whats next!!!!
Thank you Melissa! 🙏
It’s vip bro :))
Thanks a lot Thuan ✌️
Totally messed up in android:(
Hi Matin, I don't know exactly what's your issue but here's a preview of it on my Android device (Nexus 5x) streamable.com/yrdb3w.
@@CatalinMironDev when I add scale to tranform image the image will go upside down! I don't know why! I thought the problem would be RTL and LTR but it wasn't.
I'm fallin in love with you
Thank you ✌️
first
amazing!