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 ------------------------------------------------------------------------------------------------------------------------------------- ⚠️ Access full source code: https://www.animatereactnative.com/post/preloaderv-animation-loading-indicator ------------------------------------------------------------------------------------------------------------------------------------- 👉👉 Have any questions? Join Discord: https://discord.gg/vg7hUDU. ------------------- Follow me on - Twitter: http://twitter.com/mironcatalin Want to support me? - Patreon: https://patreon.com/catalinmiron - BuyMeACoffee: https://www.buymeacoffee.com/catalinmiron - Paypal: https://paypal.me/catalinmiron ---- You can find me on: - Github: http://github.com/catalinmiron - Twitter: http://twitter.com/mironcatalin - Website: http://batman.codes --- 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