We are considering using react-native-svg in our app. We are a bit tempted to use it liberally around the app to create pretty much the visuals of every page, since it should scale better than using images. We are targeting both Android and iOS, tablets and phones.
Does it make sense to make heavy use of SVGs around the app with react-native-svg instead of using PNG images?
IMHO, you should not. I had to deal with svgs a lot of time, and it was always way more complex than pure PNG. If you have to draw icons on tabs or on menus, use PNG, PNG#2x, PNG#3x. react-native-svg can be useful for remote SVG loading, like content managed in a back-office.
Related
I need to display dozens of fairly complex SVGs on screen, on a React native chat app.
Each SVG represents an avatar with 3 shades, whose color I change through code to fit the user's preferences.
Because I am changing colors dynamically, I am currently displaying the SVGs as components in a Webview.
This works fine, but when I have a dozen of those on-screen (for example inside a busy chat room), I am having some serious performance issues.
What would be a good approach to keep both my colorized SVGs AND performance?
Using react-native-svg's SvgCss improved perfomance tremendously.
I'm writing a mobile application using React Native, and we have a bunch of nice animations done in SVG, by using so-called SMIL commands inside this SVG(tags like "animate" etc).
I was trying to find a way to use those animations but to my knowledge none of the libraries that I was able to find(including react-native-svg, react-native-svg-animations) able to do that.
I also checked this link: https://react-svgr.com/playground/?native=true which claim to transform SVG code to JSX, and it said that:
"/* SVGR has dropped some elements not supported by react-native-svg: style, animate */"
Is there anyone who was able to find efficient way to run these animations on React Native?
Thanks in advance!
I have a question and I need to know if we can apply a morphing effect on a photograph in react native. If we can, can you help me to know how we do it and if we cannot what languages is more adapted for a mobile application?
So in fact I have to make a mobile application that allows me:
To Take or choose pictures.
To Define reference points between the two images.
To Calculate the corresponding animation.
And to Save the animation in a video or gif format.
I have already realized the classes that allows me to take a picture and to access at the gallery. (in react-native)
Without more details is hard to answer but you could try react-native-svg. Here is a link to an example Building React Native Animated Feedback UI
or reactArt Morphing SVG Paths with React Art
It would help if, when you ask, you gave more information though (e.g., the image format, what you have already tried, and research you have already conducted to look into the topic.)
Cheers!
I want to render a three-dimensional cube with images on its six surfaces in React Native, that can be rotated by the user. First, I wanted to use react-native-canvas, but 3D rendering isn't possible within such a canvas.
My second idea was a Web View, that is shown in React Native and that renders the cube. The big disadvantage of this solution is, that a internet connection is necessary. Furthermore, maybe the performance isn't that good this way.
So, do you have any idea how to solve my problem? Thanks for all responds.
I would recommend you use a javascript framework called three.js. it is designed to do exactly what you are looking for.
I'm working on a react native app which works with a lot of animated GIFs.
I've tried using the react native documented library com.facebook.fresco:animated-gif:1.3.0 for animated gif support, yet, the performance of the default Image component is terrible, but using FastImage package I am able to get, at maximum, 10 gifs.
As there is the possibility of integrating the native libraries in React Native, I was wondering what could a solution to this problem?
I've tested a couple ways to increase the performance of loading multiple animated GIFs in React Native:
The better format for animated pictures is webp (Why?). Once compressed, it can be around 90% more lightweight to be loaded whether in your web app or your mobile app.
Facebook's Fresco library which is the documented recommended library for rendering gifs and webp files should be upgraded as it provides a better performance for multiple gif loading, and also the original fresco library should be added as a dependency - at the moment, to at least, 1.5.0 or higher, if possible w/ react-native:0.54 -.
FlatList can be optimized to remove anything that is not on the screen using removeClippedSubviews prop. Alternatively, there are third-party libraries such as recyclerlistview or lazy loading lists out there.
Using fast-image for caching can also be advantageous in some cases.