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;
}
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
add a comment |
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
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
add a comment |
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
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
canvas react-native
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
add a comment |
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
add a comment |
3 Answers
3
active
oldest
votes
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.
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
add a comment |
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
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
add a comment |
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.
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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
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
add a comment |
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
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
add a comment |
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
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
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
add a comment |
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
add a comment |
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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