equivalent of “canvas” in React Native

-

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?

Well, after two years, there is a new choice for you:

https://alibaba.github.io/GCanvas/

This "GCanvas" is designed for native environment to run canvas2d & WebGL APIs.

See

https://alibaba.github.io/GCanvas/docs/Integrate%20GCanvas%20on%20ReactNative.html

There are a few options that are "similar" but not the exact same. My suggestions would be...

  • React Native SVG - Feels a lot like the SVG web components we are all familiar with. You can do lots with this library even animations.

  • ART (the React Native version found here) - A "React Native" version of the React ART library, which in turn is an extension of the library ART found here. It ships with React Native but I don't think it's yet been integrated in the default setup so it's in your node_modules folder and needs to be imported into XCode (the discussion is found here). I usually drag the project file out of the node_modules folder where it is located (node_modules/react-native/Libraries/ART/Art.xcodeproj) into the libraries folder in your React Native XCode project navigator. If it asks to copy resources click yes. Afterwards, go into your project settings file -> general -> Linked Frameworks and Libraries then press the plus icon. Search for ART and add it as a dependency.

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.

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

flutter websocket connection issue

-
I am trying to develop a flutter app which connects to the server and exchanges data using websocket. The server is in .Net Core and using Asp.Net Core Websockets to implement this functionality. The problem I am facing is, my flutter app is not able to connect to the server and throws following error. E/flutter (31498): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: E/flutter (31498): WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://127.0.0.1/client#' was not upgraded to websocket E/flutter (31498): #0 new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:83:24) E/flutter (31498): #1 _invokeErrorHandler (dart:async/async_error.dart:13:29) E/flutter (31498): #2 _HandleErrorStream._handleError (dart:async/stream_pipe.dart:286:9) E/flutter (31498): #3 _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:168:13) E/flutter (3149...
Read more