Stack Overflow
Stack Overflow

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
2
votes
2 answers

Exception thrown while executing UI block when using react-native-svg

My app suddenly started crashing and gave me that error: Exception thrown while executing UI block: -[__NSCFNumber firstObject]: unrecognized selector sent to instance 0xb553069cd18775de` After sometime I was able isolate the part that generates…
Abdelrhman Elmahdy
  • 1,571
  • 14
  • 15
2
votes
0 answers

getting error "requireNativeComponent: 'RNSVGLinearGradient' was not found in the UIManager..." while rendering Pie Chart using react-native-chart-kit

I have used react-native-chart-kit and react-native-svg in my project, initially I created my project in Expo, where it was working fine(the Pie Chart was rendering perfect with no issues) but when I ejected Expo, and ran project with react-native…
Anukool
  • 732
  • 1
  • 9
  • 21
2
votes
1 answer

SVG as background image in React Native

I use react-native-svg to insert SVG images into my React Native app. I'm currently replacing my pngs by svgs because of the blurriness of most of my assets. I came to a use case where I need to replace an ImageBackground, that uses png by an SVG…
Théo Lavaux
  • 1,364
  • 3
  • 22
  • 46
2
votes
2 answers

SVG not rendering when using react-native-svg-uri

Environment info React native info output: "react": "16.8.6", "react-native": "0.60.4" Library version: 1.2.3 Steps To Reproduce Create a fresh project using react-native-cli. Bring in an SVG file into the src folder of the project (I downloaded…
Muljayan
  • 3,588
  • 10
  • 30
  • 54
2
votes
1 answer

Make child views or Text view scroll behind SVG shape with transparent background in react-native

I am trying to get the text or any other child views inside the scrollview to appear behind the SVG shape which is transparent, the following SVG shape code in react-native: import React, { Component } from 'react'; import { View, Text, Image,…
0x01Brain
  • 798
  • 2
  • 12
  • 28
2
votes
1 answer

Add text label to arc shape React Native

i am using d3-shape library to build a pie chart in React Native. this is my code: Slice.js import React, { Component } from 'react'; import { Path, } from 'react-native-svg'; import * as shape from 'd3-shape'; const d3 = { shape }; export default…
houman.sanati
  • 1,054
  • 3
  • 18
  • 34
2
votes
0 answers

Rotating a rect makes it move in a weird pattern

I am attempting to make a rectangle in an svg rotate in place (so around its middle), however this has proven more difficult than I thought. The rectangle instead moves in a weird pattern. This is probably because the rotate origin is wrong however…
ApplePearPerson
  • 4,209
  • 4
  • 21
  • 36
2
votes
0 answers

React Native Map Marker load custom Image without blinking

I'm using react-native-svg@0.55.1 and react native 0.55.4 Call the following imports: import MapView, { Marker } from 'react-native-maps'; import SvgUri from 'react-native-svg-uri'; and render this marker from a marker array
lcsvcn
  • 1,184
  • 3
  • 13
  • 28
2
votes
1 answer

strokeDashedArray doesn't work (react-native-svg)

import React from 'react'; import { Svg } from 'expo'; const { Line } = Svg; export default class VerticalDashedLine extends React.Component { render() { return (
Andre Song
  • 353
  • 1
  • 4
  • 14
2
votes
0 answers

Expo SDK 31 react-navigation BottomTabNavigator with react-native-svg Icons Not Working

I use react-native-svg to create icons throughout my app including for tab navigators. Everything was working fine until I updated Expo SDK 30 to SDK 31 (same issue persists into SDK 32). It seems that the last tab's icon is overlapping the others,…
jack kruso
  • 21
  • 1
2
votes
1 answer

react-native-svg-charts / bar chart with variable bar width?

Using react-native-svg-chart, I’d like adjust bar widths according to a variable parameter but unfortunately I can’t find any example nor make my head around it. Expected result to be like: Should I use the bandwidth argument? If correct, in which…
JB Theard
  • 63
  • 5
2
votes
1 answer

svg horizontal scroll with react native and d3

I am trying to draw a horizontal scrollable bar chart using react native svg and d3. i am able to draw the bars and not getting how to make it scrollable. also, up on scroll i need to call a web service to fetch some details. can some one help me…
praveen seela
  • 538
  • 11
  • 24
2
votes
1 answer

Random crash when using react-native-svg in react native

I am using react-native-svg to create speedometer in react native, it is working fine but I am facing random crashes. this issue is in android. Issue in crashlytics: "com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while…
Dayachand Patel
  • 469
  • 4
  • 12
2
votes
0 answers

react-native-svg-charts Areachart renders an extra bottom line

I am using react-native-svg-charts to render some charts. In my case i use area chart (see image below). When the last data entries have same values, there is a bottom line appearing Here is how i render the area chart
user2564429
  • 260
  • 2
  • 11
2
votes
0 answers

How to set click event of shape(ART) area in react native?

I need write click event of particular Shape which draw using react native ART. How can i achieve this ? can you please share your ideas or thought on this so can i worked on it. sectionAngles.map(section => ( …
Ap Android
  • 21
  • 3
1 2 3
…
18 19