Drawing (with Skia) in React Native

  • To start with I create a custom React component, so that I could pass a percentage in and make it reusable:
  • Next I’ll wrap the Canvas component inside a View so we can show the text later:
  • First lets add some constants, nobody wants magic numbers when we’re drawing
  • We need to create a Path these can be done in two ways, one programatically like on Android and iOS canvas for example. The other as a Path like an SVG. I will be doing this programatically…
  • Now we have this we can draw the grey arc, that always remains static. Inside the Canvas component add the following:
  • Firstly, without animation, lets add the following directly below our Path we just added, inside the Canvas component…

Animation

  • I have chosen to use their useTiming hook. So I’ve added this block to my component:
  • Now we just need to hook our Path up to the progress value…

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tony Owen

Tony Owen

Flutter Fan Boy & Android Developer