Questions tagged [react-native-svg]

Use for react-native-svg, a JavaScript library to use\write SVG images in react-native

react-native-svg is a JavaScript library that provides both iOS and Android to be able to use\write SVG images in react-native. SVG or Scalable Vector Graphics are a kind of images that are produced by using XML scripts. This makes the images to be able to be indexed, searched and compressed. These images are interactive due to the scripts, and can also be animated thus.

https://www.npmjs.com/package/react-native-svg

275 questions
0
votes
0 answers

ToolTip not visible on LineChart on React Native application

Background: Currently trying to implement a line chart with tooltip using react-svg-chart library by following this Tutorial. Problem: The onClick decorator shows up on my phone on the Expo app(This code) and works perfectly, but when I put the…
0
votes
1 answer

Redirection fails : react-native-svg : React.createElement: type is invalid

I'm trying to understand an error. When I redirect my first screen on another one I get on the bundler : "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)…
Kimako
  • 615
  • 2
  • 11
  • 26
0
votes
1 answer

Not able to scroll through flatList in react-native-svg

I have a created a rectangle using react-native-svg and added a flatList inside that rectangle, Its showing all the items but I am not able to scroll throught the list. Please check if I am missing something or what?
Rahul Syal
  • 545
  • 2
  • 6
  • 21
0
votes
0 answers

How can i achieve the below design in react native?

I'm little bit stuck here to achieve below design in one of my app. IMAGE My code is here,
FortuneCookie
  • 1,756
  • 3
  • 25
  • 41
0
votes
1 answer

How to decrease the width of the PieChart in the module react-native-svg-charts

Since already thank you wanted to know if anyone knows how to decrease the width of Graph Pie, for it to get thinner I tried some properties in svg, but nothing works anyone could help today I have this result I wanted to reach this…
0
votes
1 answer

Invariant Violation using react-native-svg

I have the following error when I try to use react-native-svg: I use react-native-svg like this in my code: and I call the component like this import BarChart from './BarChart' // ... I am using react-native-svg : 9.13.3 and expo : 36 I…
0
votes
1 answer

most performant way of drawing line chart in react-native

I'm wondering what's the most performant way of drawing real-time line chart with streaming data at very high frequency (new values every 15ms). I getting the data through BLE, and adding to array that I'ts never bigger then 500 items. I need to…
0
votes
1 answer

React Native ignores width 100% set on SVG component but it does work on React Native Web

I have an SVG as a component. When I set it's width to 100% it works on React Native Web but not on native. There is a link to the code here however the simulator devices arn't wide enough to show the issue. If test it on your own device which is…
Evanss
  • 23,390
  • 94
  • 282
  • 505
0
votes
0 answers

How to draw BarChart with MySQL data in React native?

I need to draw a chart with MySQL server data. I found this example, but when I try to put my dynamic data it's not working: import React from 'react' import { BarChart, Grid } from 'react-native-svg-charts' import * as shape from 'd3-shape' import…
imanealami
  • 189
  • 5
  • 13
0
votes
0 answers

React native svg android error: requireNativeComponent RNSVGCIrcle

Currently I have an error on Android (see attachment). On iOS there is no error, but it isn't rendered. RN: 0.61 RNSVG: 11.0.1 // The code is simple (just for test the lib)
0
votes
1 answer

React native graph using event drops

I working with Event drops in react js. This is working fine in web app. But I am trying to implement same into React-native mobile app. Unfortunately no success yet. Any help would be appreciated? Thanks in advance!
pradeep
  • 11
  • 1
0
votes
1 answer

React Native SVG everywhere, does it make sense?

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,…
Gazihan Alankus
  • 11,256
  • 7
  • 46
  • 57
0
votes
0 answers

Is there an React-native package for plotting live time series data line charts?

I have tried using react-native-svg-charts, react-native-highcharts but no help. I am having trouble plotting data points, shifting axis(according to time) and marking axis.
0
votes
1 answer

How can I prevent warping/skewing on a rotated shape with react-native-svg?

I'm currently making an application in react-native and using react-native-svg to render in shapes, i.e. rectangles, ellipses, etc. I'm containing these shapes in an SVG container component with a width to height ratio of 2:1: The width of the…
Gumptastic
  • 145
  • 2
  • 8
0
votes
1 answer

Tried to register two views with the same name RNSVGRect

Facing this issue, when I am using two libraries react-native-d3multiline-chart for line chart and for the bar chart I am using react-native-svg-charts. Both the libraries are using same react-native-svg, when I am using react-native-svg, it is…