Liquid Wave Progress React Native Skia Reanimated D3
👋 Welcome to my React Native Liquid Gauge Tutorial!
In this video, I'll guide you through creating a cool, animated liquid fill gauge in React Native. We'll use react-native-skia and react-native-reanimated to achieve this stunning effect, inspired by the Liquid Fill Gauge Gist.
🔗 Relevant Links:
Tutorial Code: https://github.com/dimaportenko/react...
Component Library: https://github.com/dimaportenko/react...
React Native Skia: https://shopify.github.io/react-nativ...
React Native Reanimated: https://docs.swmansion.com/react-nati...
00:00 Intro
00:32 Draw Outer Circle
01:29 Draw Inner Circle
02:16 Clip Area Path
06:44 Add Text
08:19 Translate X Animation
09:50 Translate Y Animation
10:54 Text Animation
11:42 Final Result