React Native funnel chart - react-native

Is there any React native package to create funnel chart like in this?
or how to implement this chart on our own in react-native?

When it comes to drawing lines, shapes, gradients, etc, you have about two decent options in the react-native space.
The first one is React Native Art, the second one is react-native-svg. There are some charting libraries available as well, but when you want full customisation and styling/design options, the best way probably is to stay as close to the drawing api's as possible.
The funnel-graph-js project you mention uses browser SVG to draw the funnel chart, so I guess you can probably copy and adjust some code to achieve a similar result using react-native-svg.

Related

Is there a way to use SVG animation based on SMIL in React Native?

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!

How can I make an interactive drawing app in React Native?

how can I easily create an app like this in React Native?
As you can see on the gif I need to draw rectangles on the grid. Are there any libraries or maybe even paid commercials solutions for creating apps with advanced drawing like this shown on the gif?
Have you seen this library? You might need to flicker something to meet your exact requirement
https://github.com/jgrancher/react-native-sketch
https://github.com/terrylinla/react-native-sketch-canvas

Is there a react-native function or package for Morphing that we can apply on a photograph?

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!

3D Rendering in React Native

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.

React Native Maps handling large amount of markers

I have to display above 1000 markers on map. I am using react-native-maps. But the phone becomes unresponsive. Any idea how to display large data on maps?
Marker clustering is what you are looking for.
Unfortunately, react-native-maps doesn't support it, yet. There is an issue and PR though.
Easiest solution for now is to use react-native-map-clustering module on top of react-native-maps