equivalent of “canvas” in React Native





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







22















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?










share|improve this question























  • react-native-canvas does seem to be being maintained -- a new release was produced in 2017 and a bugfix was released recently. It is, however, very slow in my experience and therefore probably not useful for any but the simplest applications.

    – Jules
    Mar 18 '18 at 18:57











  • @Jules what is the correct approach for vector in react? svg? canvas? png? i want to make a background image with triangles that has no quality loss and at the same time is quite lightweight

    – Mr-Programs
    Jan 8 at 18:14


















22















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?










share|improve this question























  • react-native-canvas does seem to be being maintained -- a new release was produced in 2017 and a bugfix was released recently. It is, however, very slow in my experience and therefore probably not useful for any but the simplest applications.

    – Jules
    Mar 18 '18 at 18:57











  • @Jules what is the correct approach for vector in react? svg? canvas? png? i want to make a background image with triangles that has no quality loss and at the same time is quite lightweight

    – Mr-Programs
    Jan 8 at 18:14














22












22








22


2






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?










share|improve this 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?







canvas react-native






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Oct 11 '16 at 8:11









user6318446user6318446

122118




122118













  • react-native-canvas does seem to be being maintained -- a new release was produced in 2017 and a bugfix was released recently. It is, however, very slow in my experience and therefore probably not useful for any but the simplest applications.

    – Jules
    Mar 18 '18 at 18:57











  • @Jules what is the correct approach for vector in react? svg? canvas? png? i want to make a background image with triangles that has no quality loss and at the same time is quite lightweight

    – Mr-Programs
    Jan 8 at 18:14



















  • react-native-canvas does seem to be being maintained -- a new release was produced in 2017 and a bugfix was released recently. It is, however, very slow in my experience and therefore probably not useful for any but the simplest applications.

    – Jules
    Mar 18 '18 at 18:57











  • @Jules what is the correct approach for vector in react? svg? canvas? png? i want to make a background image with triangles that has no quality loss and at the same time is quite lightweight

    – Mr-Programs
    Jan 8 at 18:14

















react-native-canvas does seem to be being maintained -- a new release was produced in 2017 and a bugfix was released recently. It is, however, very slow in my experience and therefore probably not useful for any but the simplest applications.

– Jules
Mar 18 '18 at 18:57





react-native-canvas does seem to be being maintained -- a new release was produced in 2017 and a bugfix was released recently. It is, however, very slow in my experience and therefore probably not useful for any but the simplest applications.

– Jules
Mar 18 '18 at 18:57













@Jules what is the correct approach for vector in react? svg? canvas? png? i want to make a background image with triangles that has no quality loss and at the same time is quite lightweight

– Mr-Programs
Jan 8 at 18:14





@Jules what is the correct approach for vector in react? svg? canvas? png? i want to make a background image with triangles that has no quality loss and at the same time is quite lightweight

– Mr-Programs
Jan 8 at 18:14












3 Answers
3






active

oldest

votes


















6














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.






share|improve this answer


























  • I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

    – Stephen Tetreault
    Nov 18 '18 at 15:22











  • Yes, I think you can.

    – Iddan Aaronsohn
    Nov 18 '18 at 21:01











  • Great thanks for the reply! I will continue experimenting with it.

    – Stephen Tetreault
    Nov 20 '18 at 15:52











  • react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

    – Roger
    Nov 21 '18 at 2:44











  • To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

    – Iddan Aaronsohn
    Feb 18 at 13:24





















5














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






share|improve this answer



















  • 2





    It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

    – Jules
    Mar 18 '18 at 18:55






  • 1





    @Jules could you give more information about the build failing? environment and error message would be good.

    – Shaofei Cheng
    Mar 22 '18 at 5:34











  • Does it manage touch events ? Looks not from the documentation

    – Claudio Ferraro
    Feb 1 at 12:31



















4














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.



Note: If you just started on react-native following the official "Getting Started" guide in the last few month, the default guide is to use "expo". And React Native SVG is by default included in the expo build. So using it would be a whole lot easier.






share|improve this answer





















  • 1





    The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

    – Jules
    Mar 18 '18 at 18:59






  • 1





    Seems like there's some documentation now for ART, but yeah still needs some work.

    – Stephen Tetreault
    Nov 20 '18 at 15:55











  • @StephenTetreault thanks for the update

    – GoreDefex
    Nov 20 '18 at 16:23












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39972962%2fequivalent-of-canvas-in-react-native%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























3 Answers
3






active

oldest

votes








3 Answers
3






active

oldest

votes









active

oldest

votes






active

oldest

votes









6














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.






share|improve this answer


























  • I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

    – Stephen Tetreault
    Nov 18 '18 at 15:22











  • Yes, I think you can.

    – Iddan Aaronsohn
    Nov 18 '18 at 21:01











  • Great thanks for the reply! I will continue experimenting with it.

    – Stephen Tetreault
    Nov 20 '18 at 15:52











  • react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

    – Roger
    Nov 21 '18 at 2:44











  • To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

    – Iddan Aaronsohn
    Feb 18 at 13:24


















6














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.






share|improve this answer


























  • I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

    – Stephen Tetreault
    Nov 18 '18 at 15:22











  • Yes, I think you can.

    – Iddan Aaronsohn
    Nov 18 '18 at 21:01











  • Great thanks for the reply! I will continue experimenting with it.

    – Stephen Tetreault
    Nov 20 '18 at 15:52











  • react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

    – Roger
    Nov 21 '18 at 2:44











  • To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

    – Iddan Aaronsohn
    Feb 18 at 13:24
















6












6








6







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.






share|improve this answer















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.







share|improve this answer














share|improve this answer



share|improve this answer








edited May 23 '18 at 10:03

























answered May 22 '18 at 23:47









Iddan AaronsohnIddan Aaronsohn

9915




9915













  • I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

    – Stephen Tetreault
    Nov 18 '18 at 15:22











  • Yes, I think you can.

    – Iddan Aaronsohn
    Nov 18 '18 at 21:01











  • Great thanks for the reply! I will continue experimenting with it.

    – Stephen Tetreault
    Nov 20 '18 at 15:52











  • react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

    – Roger
    Nov 21 '18 at 2:44











  • To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

    – Iddan Aaronsohn
    Feb 18 at 13:24





















  • I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

    – Stephen Tetreault
    Nov 18 '18 at 15:22











  • Yes, I think you can.

    – Iddan Aaronsohn
    Nov 18 '18 at 21:01











  • Great thanks for the reply! I will continue experimenting with it.

    – Stephen Tetreault
    Nov 20 '18 at 15:52











  • react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

    – Roger
    Nov 21 '18 at 2:44











  • To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

    – Iddan Aaronsohn
    Feb 18 at 13:24



















I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

– Stephen Tetreault
Nov 18 '18 at 15:22





I'm creating a RN project that takes images from the camera roll and does pixel sorting on them. In the browser this would normally be done by taking in image data, manipulating it, and obviously writing it to the canvas. Do you think your library is something I could use to achieve this in React Native? I could do some other hack and process the images with phantomjs and save them then fetch them but i'd rather do it all in RN.

– Stephen Tetreault
Nov 18 '18 at 15:22













Yes, I think you can.

– Iddan Aaronsohn
Nov 18 '18 at 21:01





Yes, I think you can.

– Iddan Aaronsohn
Nov 18 '18 at 21:01













Great thanks for the reply! I will continue experimenting with it.

– Stephen Tetreault
Nov 20 '18 at 15:52





Great thanks for the reply! I will continue experimenting with it.

– Stephen Tetreault
Nov 20 '18 at 15:52













react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

– Roger
Nov 21 '18 at 2:44





react-native-canvas looks useful, but I was unable to draw beyond a 300x150 rectangle. The entire canvas does appear in the correct background color, but my beginPath/moveTo/lineTo/stroke calls seem to do nothing beyond 300x150 from the top left of the canvas. Any ideas?

– Roger
Nov 21 '18 at 2:44













To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

– Iddan Aaronsohn
Feb 18 at 13:24







To set height and weight just set them for the canvas: canvas.height = 400; canvas.width = 600;

– Iddan Aaronsohn
Feb 18 at 13:24















5














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






share|improve this answer



















  • 2





    It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

    – Jules
    Mar 18 '18 at 18:55






  • 1





    @Jules could you give more information about the build failing? environment and error message would be good.

    – Shaofei Cheng
    Mar 22 '18 at 5:34











  • Does it manage touch events ? Looks not from the documentation

    – Claudio Ferraro
    Feb 1 at 12:31
















5














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






share|improve this answer



















  • 2





    It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

    – Jules
    Mar 18 '18 at 18:55






  • 1





    @Jules could you give more information about the build failing? environment and error message would be good.

    – Shaofei Cheng
    Mar 22 '18 at 5:34











  • Does it manage touch events ? Looks not from the documentation

    – Claudio Ferraro
    Feb 1 at 12:31














5












5








5







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






share|improve this answer













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







share|improve this answer












share|improve this answer



share|improve this answer










answered Mar 6 '18 at 9:05









Shaofei ChengShaofei Cheng

519510




519510








  • 2





    It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

    – Jules
    Mar 18 '18 at 18:55






  • 1





    @Jules could you give more information about the build failing? environment and error message would be good.

    – Shaofei Cheng
    Mar 22 '18 at 5:34











  • Does it manage touch events ? Looks not from the documentation

    – Claudio Ferraro
    Feb 1 at 12:31














  • 2





    It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

    – Jules
    Mar 18 '18 at 18:55






  • 1





    @Jules could you give more information about the build failing? environment and error message would be good.

    – Shaofei Cheng
    Mar 22 '18 at 5:34











  • Does it manage touch events ? Looks not from the documentation

    – Claudio Ferraro
    Feb 1 at 12:31








2




2





It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

– Jules
Mar 18 '18 at 18:55





It looks like an interesting project, but it doesn't really seem to be ready for production use yet. I've been unable to get it to compile on either iOS or Android, and the documentation is a little sparse. Could be very good when it is ready, though.

– Jules
Mar 18 '18 at 18:55




1




1





@Jules could you give more information about the build failing? environment and error message would be good.

– Shaofei Cheng
Mar 22 '18 at 5:34





@Jules could you give more information about the build failing? environment and error message would be good.

– Shaofei Cheng
Mar 22 '18 at 5:34













Does it manage touch events ? Looks not from the documentation

– Claudio Ferraro
Feb 1 at 12:31





Does it manage touch events ? Looks not from the documentation

– Claudio Ferraro
Feb 1 at 12:31











4














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.



Note: If you just started on react-native following the official "Getting Started" guide in the last few month, the default guide is to use "expo". And React Native SVG is by default included in the expo build. So using it would be a whole lot easier.






share|improve this answer





















  • 1





    The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

    – Jules
    Mar 18 '18 at 18:59






  • 1





    Seems like there's some documentation now for ART, but yeah still needs some work.

    – Stephen Tetreault
    Nov 20 '18 at 15:55











  • @StephenTetreault thanks for the update

    – GoreDefex
    Nov 20 '18 at 16:23
















4














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.



Note: If you just started on react-native following the official "Getting Started" guide in the last few month, the default guide is to use "expo". And React Native SVG is by default included in the expo build. So using it would be a whole lot easier.






share|improve this answer





















  • 1





    The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

    – Jules
    Mar 18 '18 at 18:59






  • 1





    Seems like there's some documentation now for ART, but yeah still needs some work.

    – Stephen Tetreault
    Nov 20 '18 at 15:55











  • @StephenTetreault thanks for the update

    – GoreDefex
    Nov 20 '18 at 16:23














4












4








4







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.



Note: If you just started on react-native following the official "Getting Started" guide in the last few month, the default guide is to use "expo". And React Native SVG is by default included in the expo build. So using it would be a whole lot easier.






share|improve this answer















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.



Note: If you just started on react-native following the official "Getting Started" guide in the last few month, the default guide is to use "expo". And React Native SVG is by default included in the expo build. So using it would be a whole lot easier.







share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 9 at 13:03









JaKK's Team

356




356










answered Aug 2 '17 at 20:46









GoreDefexGoreDefex

728628




728628








  • 1





    The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

    – Jules
    Mar 18 '18 at 18:59






  • 1





    Seems like there's some documentation now for ART, but yeah still needs some work.

    – Stephen Tetreault
    Nov 20 '18 at 15:55











  • @StephenTetreault thanks for the update

    – GoreDefex
    Nov 20 '18 at 16:23














  • 1





    The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

    – Jules
    Mar 18 '18 at 18:59






  • 1





    Seems like there's some documentation now for ART, but yeah still needs some work.

    – Stephen Tetreault
    Nov 20 '18 at 15:55











  • @StephenTetreault thanks for the update

    – GoreDefex
    Nov 20 '18 at 16:23








1




1





The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

– Jules
Mar 18 '18 at 18:59





The main problem with React Native ART is that it seems to be entirely undocumented. There's a project to write documentation for it here that could be useful.

– Jules
Mar 18 '18 at 18:59




1




1





Seems like there's some documentation now for ART, but yeah still needs some work.

– Stephen Tetreault
Nov 20 '18 at 15:55





Seems like there's some documentation now for ART, but yeah still needs some work.

– Stephen Tetreault
Nov 20 '18 at 15:55













@StephenTetreault thanks for the update

– GoreDefex
Nov 20 '18 at 16:23





@StephenTetreault thanks for the update

– GoreDefex
Nov 20 '18 at 16:23


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39972962%2fequivalent-of-canvas-in-react-native%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

How to fix TextFormField cause rebuild widget in Flutter

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith