React Native Loading Animation - React Native Moti & Reanimated v2

🔥 In this video tutorial we will create a powerful custom loading indicator 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
- What's the difference between repeat and loop in react native moti
- How important is React Native Reanimated 2
- How performant is React Native Reanimated 2
- How to animate width, height, borderRadius, borderWidth and shadowOpacity in React Native and still running at 60fps

-------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------

-------------------

Follow me on

Want to support me?

----

You can find me on:

---

Timeline:
- 00:00 Intro
- 00:08 What we're going to build
- 00:30 What is React Native Moti
- 00:51 Access 50+ animation resources
- 01:35 Jumping into VSCode
- 02:15 Style the loading indicator component
- 02:50 Apply Glowing effect
- 03:09 Loop, Repeat and RepeatReverse in react native moti
- 04:50 Breathing animation
- 05:40 Change the transition of the component
- 06:15 Repeat the animation
- 06:47 Repeat Infinity aka loop: true
- 07:10 What is repeatReverse
- 07:40 Output of repeatReverse
- 08:15 Animate more
- 09:04 Animation performance and running at 60fps
- 10:00 Final words about react native moti

#reactnative #reanimated2 #moti #react-native-moti #react-native-reanimated #custom-loading-indicator #react-native-animations #react-native-loop #react-native-repeat

[maplache]

I'm glad to see you back, your videos are really helpful. Keep up the good work!

[muaddibby]

your channel is a blessing! thank you SO much! as soon as i get a dev job, i'll subscribe to your patreon, you deserve the world <3

[bedirhanaygul]

Hey Catalin! Welcome its so good to see you back :)

[curiosabouttech]

Thank you buddy you can't imagine how much you boosted my mobile dev career.❤

[davidattah]

Its so good to see you back and active...

[brunobuss]

Welcome back dude It´s been a while, love your tutorials!!

[Eghizio]

So simple yet the effect looks so good :D

[hadiyakhni]

We love you man, gald you're back!!

[tamjuh]

awesome! good editing as well on the video - thank you

[cloudkungfu]

Tha man is back at it with the good stuff 🔥🔥

[khalisafkari]

I've been waiting a long time for a video tutorial from you

[tallawahh]

Practically the easiest to use animation framework for RN I've seen. No coincidence it's really similar to css keyframes, same concept, only written with a component

[sourabhatigre]

Big fan of u man...after long time nice to see u man

[bere]

I arrive by clicking on the like.

Your videos help me a lot! thank so much for this!!!!

[syknz]

Heeeey brooo hi again! Getting pro day after day, keep it up!!!

[lappliHourReactNative]

Awesome com back ! Thnak you very much for this content ;)

[TheBalorog]

Hey Catalin!
amazing video as always, but as shadows only work with IOS what is your advice to develop something similar to this on react native for android?

[oyewoleshedrack]

Thanks for this tutorial, I would like to ask if I can change the repeat value with useState (between Infintiy and 0). Thanks

[guilhermemigliano]

What is the extension you have for motiview on vscode. I think you could share the extensios you use. Thanks!
Your videos are amazing btw

[levisiebra]

thank you for tutorial, man. Help me very much :)