Animated Loader with React Native (Skia)

Creating animated custom loaders seems like a simple task. However, this little tiny component can be really tricky if you don't know which tools to use. In this tutorial, we'll solve this problem using both Reanimated and React Native Skia. As always, we'll start with an empty Expo project :) Written Tutorial: https://reactiive.io/articles/animated-loader-skia My React Native animations course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Interpolate Tutorial: https://youtu.be/8_hvNoZJsc8 Layout Animations Tutorial: https://youtu.be/NPq_MFLnQrQ Source code: https://github.com/enzomanuelmangano/exploring-skia/tree/main/activity-indicator Chapters: 00:00 Introduction 00:33 Skia Canvas Setup 05:18 Convert the Circle to a Skia Path 08:20 The SweepGradient 10:20 The BlurMask 12:48 Animating the Loader 17:30 Animating the Skia Path 24:06 Entering/Exiting animations