👋 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-native-liquid-gauge-tutorial
Component Library: https://github.com/dimaportenko/react-native-liquid-gauge
React Native Skia: https://shopify.github.io/react-native-skia/
React Native Reanimated: https://docs.swmansion.com/react-native-reanimated/
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
