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

  • @fernandorojo6311
    @fernandorojo63112 жыл бұрын

    ‪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

    @CatalinMironDev

    2 жыл бұрын

    Thanks Fernando 🤗

  • @sykn3z
    @sykn3z2 жыл бұрын

    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

    @CatalinMironDev

    2 жыл бұрын

    Thanks a lot ✌️

  • @brunofarias2521
    @brunofarias25212 жыл бұрын

    This is the best chanel for animations that i've seen, thanks a lot for the awesome tutorials.

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Wow, thanks Bruno ✌️

  • @darianmorat
    @darianmorat2 жыл бұрын

    I need more channels like this... Amazing video bro ✨

  • @arshie1536
    @arshie15362 жыл бұрын

    I was waiting for it for so long.

  • @SRRAIN
    @SRRAIN5 ай бұрын

    love you, man, for your content

  • @glaze4629
    @glaze46292 жыл бұрын

    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

  • @dilipsuthar2817
    @dilipsuthar28172 жыл бұрын

    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

    @CatalinMironDev

    2 жыл бұрын

    Thanks a lot Dilip ✌️

  • @bere690
    @bere6902 жыл бұрын

    simply amazing, one more time thank you so much for this fantastic content .

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    You’re welcome Alexandre ✌️

  • @atif7865
    @atif7865 Жыл бұрын

    Amazing tutorial!!!

  • @collinsk8754
    @collinsk8754Ай бұрын

    Really good!

  • @Cookies-cv3nd
    @Cookies-cv3nd4 ай бұрын

    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 😅

  • @raajnadar
    @raajnadar2 жыл бұрын

    Wooh that is awesome 😘

  • @davidattah1629
    @davidattah16292 жыл бұрын

    You're a Rockstar bro.... Thanks a million

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thanks David ✌️

  • @mrrestartcode
    @mrrestartcode5 ай бұрын

    awesome bro

  • @lefandesverts
    @lefandesverts2 жыл бұрын

    Awesome as always 😍👌

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thank you so much 😀

  • @egyjohn9409
    @egyjohn94092 жыл бұрын

    Simple but Awesome.

  • @geekthegeek730
    @geekthegeek7302 жыл бұрын

    Wooww! Amazing content for react native animation 🔥🔥🔥🔥🔥

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Glad you liked it! 🎉

  • @decooliveirars
    @decooliveirars2 жыл бұрын

    You're great! Thanks for the awesome content. I'll become a patreon. Thanks a lot

  • @lifeisbeautifu1
    @lifeisbeautifu1 Жыл бұрын

    Amazing

  • @raymondmichael4987
    @raymondmichael4987 Жыл бұрын

    It's like talking to a friend ; thanks buddy. I really miss your videos, hopefully everything is fine Greetings from Tanzania 🇹🇿

  • @realcodeninja
    @realcodeninja Жыл бұрын

    Nice build

  • @PSSMPlay
    @PSSMPlay2 жыл бұрын

    THANKS FOR COMING BACK MAN WE MISSED YOU A LOT

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    I’m doing my best Pedro ✌️

  • @abhishektiwarijr
    @abhishektiwarijr2 жыл бұрын

    Who else thinks that Catalin sounds so high in his videos. Jokes apart.. Man you're awesome. Love your contents.

  • @balogunakanbi6329
    @balogunakanbi63292 жыл бұрын

    Hey man, you're awesome!!

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    You’re awesome too Balogun ✌️

  • @codewithalade5399
    @codewithalade53992 жыл бұрын

    Very good videos, plz we need more content like this.

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thanks Alade✌️

  • @seanknowles9985
    @seanknowles99852 жыл бұрын

    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 :)

  • @benabernethy1405
    @benabernethy14052 жыл бұрын

    Happy to see another vid up! Which font do you use for your IDE? Thanks! 🙌

  • @geekthegeek730

    @geekthegeek730

    2 жыл бұрын

    Default font in mac OS

  • @nfaical3
    @nfaical32 жыл бұрын

    Thanks :-)

  • @vishusmart7174
    @vishusmart71742 жыл бұрын

    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. ❤️

  • @Mr_Zeal1001
    @Mr_Zeal10016 ай бұрын

    Thank you so much, God bless you (from india) loop loop loop....

  • @RudolfCickoMusic
    @RudolfCickoMusic Жыл бұрын

    5:33 I can feel the satisfaction from your face :D Love your content Catalin!

  • @williamx0
    @williamx02 жыл бұрын

    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.

  • @pedrofeltrin8774
    @pedrofeltrin87742 жыл бұрын

    great content

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thanks Pedro, I’m glad that you liked it ✌️

  • @leonharkth
    @leonharkth2 жыл бұрын

    eyyy his back!

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Hahha, almost there Leon ✌️

  • @linhnt
    @linhnt2 жыл бұрын

    Nice, Long time to see you. ah what extension are you using to suggest the code? 😃

  • @pnjegosh
    @pnjegosh2 жыл бұрын

    You rock!

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thank you Njegos ✌️

  • @elsecoding8691
    @elsecoding86912 жыл бұрын

    Why does it feel like you make this videos for me😅😅.... Keep rocking it 🔥🔥🔥

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thanks Solomon ✌️

  • @sanghoonkim339
    @sanghoonkim3392 жыл бұрын

    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...

  • @iancardona3719
    @iancardona3719 Жыл бұрын

    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

  • @coldsir5406
    @coldsir54062 жыл бұрын

    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 :

  • @ali_bagdatli
    @ali_bagdatli2 жыл бұрын

    Thanks

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    You’re welcome Ali ✌️

  • @MrKaremnour
    @MrKaremnour2 жыл бұрын

    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

  • @jabirmohammad8985
    @jabirmohammad89852 жыл бұрын

    nice video bro

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Thanks Jabir ✌️

  • @maheshpalsingh8145
    @maheshpalsingh81452 жыл бұрын

    Great Work, It is not working in project without expo Getting error while using Moti Cannot read property 'useContext' of null.

  • @sanaullahamir8839

    @sanaullahamir8839

    2 жыл бұрын

    Same Here. Did you find any solution?

  • @vikaskathuria3813
    @vikaskathuria3813 Жыл бұрын

    Can we use Moti in react native cli also?

  • @aliinceoglu6076
    @aliinceoglu60762 жыл бұрын

    Is it possible to pause between each cycle?

  • @rafaelcotrina7328
    @rafaelcotrina7328 Жыл бұрын

    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 ???

  • @zacdemi
    @zacdemi2 жыл бұрын

    Yeah!

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Cheers Zac ✌️

  • @raajnadar
    @raajnadar2 жыл бұрын

    That was so easy 🐱

  • @poonamsoni6859
    @poonamsoni68592 жыл бұрын

    Tell us about your theme and Font I vs code. A BIG FAN of yours

  • @CatalinMironDev

    @CatalinMironDev

    2 жыл бұрын

    Hi Poonam, my VSCode theme its called Palenight (Mild Contrast). Thanks!

  • @kbietten
    @kbietten2 жыл бұрын

    I get error in android (emulator and real device) that look blink, iOS works fine. Have you tried on android?

  • @kbietten

    @kbietten

    2 жыл бұрын

    error: drive.google.com/file/d/1MwheCiKsIoB6S59mx16Ywdw66X6DSns2/view?usp=sharing I got when using repeatReverse: false

  • @codingmaster5224
    @codingmaster52242 жыл бұрын

    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

    @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!

  • @roboto9008
    @roboto90082 жыл бұрын

    What are you using for those quick imports?

  • @geekthegeek730

    @geekthegeek730

    2 жыл бұрын

    VS code automatically imports those

  • @roboto9008

    @roboto9008

    2 жыл бұрын

    @@geekthegeek730 Its not for me, maybe Ive done something wrong? Maybe it's tabnine?

  • @geekthegeek730

    @geekthegeek730

    2 жыл бұрын

    @@roboto9008 try installing intelli sense extension from Microsoft

  • @christianfaustinorio8671
    @christianfaustinorio86712 жыл бұрын

    Anyone knows how to do this without using moti?

  • @DrNabeel20
    @DrNabeel202 жыл бұрын

    :D

  • @afad06666
    @afad066662 жыл бұрын

    react native cli not working moti

  • @ahammedmishal1622

    @ahammedmishal1622

    Жыл бұрын

    did you find a way to work the motiview in cli ??

  • @RVKAWAAA
    @RVKAWAAA2 жыл бұрын

    but, the initial code ? :(

  • @CatalinMironDev

    @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 ✌️

  • @ilovenaturesound5123
    @ilovenaturesound512310 ай бұрын

    {[...Array(5).keys()].map((index) => ( ))} const styles = StyleSheet.create({ dot: { width: 100, height: 100, borderRadius: 100, backgroundColor: "red", }, center: { alignItems: "center", justifyContent: "center", }, });