waveform-visualizer
waveform-visualizer copied to clipboard
Using with with React Native
Is there a possibility to use this lib with react native?
would be great if i could draw this on
https://shopify.github.io/react-native-skia/docs/canvas/overview/
hmmm good question, unfortunately I don't know... I have never used react native skia, so I can't tell for sure
I'm however using this library in a current project (that is not yet released) that uses react, so I can say for sure that it works with react (web)
my code looks like what is in the example I added to the readme: https://github.com/chrisweb/waveform-visualizer?tab=readme-ov-file#react-component-example some time ago
I quickly checked out the link you provided and I see they use react useRef too to create a canvasRef, so maybe what would work is to create the canvas using that library and then pass that ref to the waveform-visualizer for it to draw in it, which can be done like this:
waveform.setCanvasElement(canvasRef.current)
the problem I see, is that the waveform will always be drawn at a certain location but what you probably want is to position the waveform somewhere in your canvas, so what the waveform-visualizer probably needs is a way to set x,y coordinates (as origin) to tell it where it should start drawing
If you could write a small prototype and share it here, I would be willing to try and help finding a solution to make it work (no gurantee it is doable though, but as of now I see no reason why it would be impossible)