React Native Phone Ring Indicator Wave - React Native Moti & Reanimated 2
🔥 In this video tutorial we will create an awesome react native phone ring indicator wave animation using React Native Moti powered by the amazing React Native Reanimated 2 running at 60fps.
We'll go through:
- How to use React Native Moti loop functionality
- How to use React Native Moti repeatReverse functionality
- Why React Native Reanimated 2 is just important
- How performant is React Native Reanimated 2
- How to animate this custom phone ringing indicator wave
________________________________________________________________________________
⚠️ Access full source code: www.animatereactnative.com/po...
▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
👉👉 Have any questions? Join Discord: / discord .
-------------------
Follow me on
- Twitter: / mironcatalin
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinm...
- Paypal: paypal.me/catalinmiron
----
You can find me on:
- Github: github.com/catalinmiron
- Twitter: / mironcatalin
- Website: batman.codes
---
Timeline:
- 00:00 Intro
- 00:10 What we're going to build
- 00:32 Access 50+ animations on Patreon
- 01:18 Start coding inside VSCode
- 01:42 How we're going to create the animation
- 02:30 Create the circles that will animate
- 03:05 Use React Native Moti for the circles
- 03:20 Animate the circles
- 04:00 Change the transition of React Native Moti
- 04:35 Change the animation to loop: true
- 04:50 Create the stagger animation with React Native Moti
- 06:03 What is repeatReverse and how to use it
- 07:22 React Native Moti Performance
- 08:05 Some special performance
- 08:20 Final words
#reactnative #reanimated2 #moti #react-native-moti #react-native-reanimated #react-native-animations #react-native-loop #react-native-repeat #react-native-repeat-reverse #react-native-ring-indicator #react-native-wave #react-native-call-indicator
Пікірлер: 88
It’s a cool feeling to build an open source library and then watch people use the APIs in ways you hadn’t considered. Loved the video.
@CatalinMironDev
2 жыл бұрын
Thanks Fernando 🤗
Im a simple man, when I see a great man I press like before even watch the video. Man you are getting better on making videos, keep it up! Waiting for your course
@CatalinMironDev
2 жыл бұрын
Thanks a lot ✌️
This is the best chanel for animations that i've seen, thanks a lot for the awesome tutorials.
@CatalinMironDev
2 жыл бұрын
Wow, thanks Bruno ✌️
I need more channels like this... Amazing video bro ✨
I was waiting for it for so long.
love you, man, for your content
I'm kind of amazing how people can come up with these ideas with such simple primitives, really nice animation, think i'll try to implement it with reanimated 2 high order animations
You are doing fantastic Catalin, all your animations are awesome. I wait everyday when will your new video come and when can I watch!!
@CatalinMironDev
2 жыл бұрын
Thanks a lot Dilip ✌️
simply amazing, one more time thank you so much for this fantastic content .
@CatalinMironDev
2 жыл бұрын
You’re welcome Alexandre ✌️
Amazing tutorial!!!
Really good!
I'm new coder and subscriber to your channel, and i loved the simplicity yet effective tutorial, and since this is my first time watching you i gotta say, at the end of the video you freaked me out thinking my speakers broke from that weird noises 😅
Wooh that is awesome 😘
You're a Rockstar bro.... Thanks a million
@CatalinMironDev
2 жыл бұрын
Thanks David ✌️
awesome bro
Awesome as always 😍👌
@CatalinMironDev
2 жыл бұрын
Thank you so much 😀
Simple but Awesome.
Wooww! Amazing content for react native animation 🔥🔥🔥🔥🔥
@CatalinMironDev
2 жыл бұрын
Glad you liked it! 🎉
You're great! Thanks for the awesome content. I'll become a patreon. Thanks a lot
Amazing
It's like talking to a friend ; thanks buddy. I really miss your videos, hopefully everything is fine Greetings from Tanzania 🇹🇿
Nice build
THANKS FOR COMING BACK MAN WE MISSED YOU A LOT
@CatalinMironDev
2 жыл бұрын
I’m doing my best Pedro ✌️
Who else thinks that Catalin sounds so high in his videos. Jokes apart.. Man you're awesome. Love your contents.
Hey man, you're awesome!!
@CatalinMironDev
2 жыл бұрын
You’re awesome too Balogun ✌️
Very good videos, plz we need more content like this.
@CatalinMironDev
2 жыл бұрын
Thanks Alade✌️
Hey my guy, it would be amazing to get a full course on react native animations that cover everything that Moti And Reanimated can do, I would defo pay for full up-to-date course :)
Happy to see another vid up! Which font do you use for your IDE? Thanks! 🙌
@geekthegeek730
2 жыл бұрын
Default font in mac OS
Thanks :-)
It's really cool. You really make a knowledgeable video. Can you make a video for best practices in react native.what we can do for app optimisation. ❤️
Thank you so much, God bless you (from india) loop loop loop....
5:33 I can feel the satisfaction from your face :D Love your content Catalin!
Would you consider doing a "Chrome Drag to Sort" tutorial with React Native Animation? William Candillon did one but using ReAnimated2. This seems like one of the harder animations to do but you would be the guy for it. Haha I'm also asking because it's not clear how to make ReAnimated2 work on the web in a managed Expo project.
great content
@CatalinMironDev
2 жыл бұрын
Thanks Pedro, I’m glad that you liked it ✌️
eyyy his back!
@CatalinMironDev
2 жыл бұрын
Hahha, almost there Leon ✌️
Nice, Long time to see you. ah what extension are you using to suggest the code? 😃
You rock!
@CatalinMironDev
2 жыл бұрын
Thank you Njegos ✌️
Why does it feel like you make this videos for me😅😅.... Keep rocking it 🔥🔥🔥
@CatalinMironDev
2 жыл бұрын
Thanks Solomon ✌️
I got error from motify... `@motify could not be found within the project or in these directories:` I've tried remove & reinstall & restart & cache delete...
thats really good! the only problem i got is that the animation gets disrupted and out of sync whenever i change a state that changes its color, is there a way to fix this? just a newbie :D
Amazing. I have one question. Let's say i want to stop the animation. I'll just return null using a ternary operator? stop ? null :
Thanks
@CatalinMironDev
2 жыл бұрын
You’re welcome Ali ✌️
Awesome 👍😎 Please can you create tutorial for uber eat filters,, when use for example tab on burger the screen scroll to burger section...even if user scroll by his finger and reach to burger section the burger tab should highlight
nice video bro
@CatalinMironDev
2 жыл бұрын
Thanks Jabir ✌️
Great Work, It is not working in project without expo Getting error while using Moti Cannot read property 'useContext' of null.
@sanaullahamir8839
2 жыл бұрын
Same Here. Did you find any solution?
Can we use Moti in react native cli also?
Is it possible to pause between each cycle?
on my project I did the same as the code and it gives me an error it does not load me when I start making the animations, it iresce to see statically but then when I start making the animations it freezes .. why ???
Yeah!
@CatalinMironDev
2 жыл бұрын
Cheers Zac ✌️
That was so easy 🐱
Tell us about your theme and Font I vs code. A BIG FAN of yours
@CatalinMironDev
2 жыл бұрын
Hi Poonam, my VSCode theme its called Palenight (Mild Contrast). Thanks!
I get error in android (emulator and real device) that look blink, iOS works fine. Have you tried on android?
@kbietten
2 жыл бұрын
error: drive.google.com/file/d/1MwheCiKsIoB6S59mx16Ywdw66X6DSns2/view?usp=sharing I got when using repeatReverse: false
If you have a functional component and you change the state this animations breaks !!!!! How to fix it ? I suspect it's a timer internal problem or something
@CatalinMironDev
2 жыл бұрын
You can move the animation logic outside of the component that has the state so the component will not be re-rendered. I hope this helped you!
What are you using for those quick imports?
@geekthegeek730
2 жыл бұрын
VS code automatically imports those
@roboto9008
2 жыл бұрын
@@geekthegeek730 Its not for me, maybe Ive done something wrong? Maybe it's tabnine?
@geekthegeek730
2 жыл бұрын
@@roboto9008 try installing intelli sense extension from Microsoft
Anyone knows how to do this without using moti?
:D
react native cli not working moti
@ahammedmishal1622
Жыл бұрын
did you find a way to work the motiview in cli ??
but, the initial code ? :(
@CatalinMironDev
2 жыл бұрын
I thought its just the concept that you can apply in your existing project rather than a step by step. I’ll include, if necessary, in my next tutorials. Thanks Jose ✌️
{[...Array(5).keys()].map((index) => ( ))} const styles = StyleSheet.create({ dot: { width: 100, height: 100, borderRadius: 100, backgroundColor: "red", }, center: { alignItems: "center", justifyContent: "center", }, });