Liquid Wave Progress React Native Skia Reanimated D3

[@wcandillon]

great job :)

[@dimaportenko]

Thank you, William!

[@it-coding]

Similar to the video from the channel "Amit Khatkar - Untangle Code"

[@dimaportenko]

I watched Amit video, nice one. Key differences - different way to generate clip path - animation uses reanimated which is recommended by creators of rn skia library - animated text with nice underwater effect Basically I made a small package github.com/dimaportenko/react-native-liquid-gauge which is replica of gist.github.com/brattonc/5e5ce9beee483220e2f6. This tutorial is simplified version of it.

[@ythan000]

I think this custom component looks amazing. I tried to import and use it myself but when trying to demo my application in the expo emulator, I crashes due to a support issue from the MakeFromSVGString function used through React Native Skia. Now the Liquid Gauge looks amazing on my phone (in Expo Go). Does anyone have an idea on how to fix this? It would be greatly appreciated.

[@dimaportenko]

I would recommend to check issues on the github github.com/Shopify/react-native-skia/issues. Usually if it's common issue it should be there with possible solutions.

[@bnny2175]

Thank you so much for this

[@dimaportenko]

Glad, you like it!

[@realspacevideos]

Use Android

[@dimaportenko]

I'm using Android.