equivalent of "canvas" in React Native

Question

I am currently working on an image processing mobile App based on React-Native. However, I can't find any related documents about the image crop, zoom, pan, and save functions (which can be easily achieved by the HTML5 canvas element) on the React-Native official site.

I also do some google searches, but only find an "unmaintained" react-native-canvas (https://github.com/lwansbrough/react-native-canvas). Is there any equivalent of the "canvas" in React Native?

Answer 1

react-native-canvas maintainer here. Since this question was asked a lot has changed in the library: it's the most complete and compatible canvas component for React Native featuring advanced features like Path2D and gradients, and unlike the default web view canvas it renders in high DPI.

The component is slower compared to other React Native components because behind the scenes it uses a WebView to render. The communication with it is optimised though and in many ways resemble the way React Native renders native views. The trade-off is the library doesn't require any native installation and relies only on the React Native JavaScript runtime and the native WebView

There was an idea to render the canvas in the React Native JavaScript runtime though no-one has made a feature complete no-DOM canvas on a JavaScript runtime before so it will take a decent amount of effort to implement.

From our experience at K Health it's possible to render fast enough graphics for responsive user interaction but not fast enough for full animation. The component is used in our app which has thousands of users.

The contributors and users of react-native-canvas, including myself, are very willing to help and if you have any question you can feel free to open an issue or send an email.