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
51
votes
8 answers

How can I automatically scale an SVG element within a React Native View?

I am trying to put a react-native-svg element inside of a View such that it's rendered with a certain, fixed aspect ratio, but then scaled to be as large as possible, within the confines of the containing view. The Svg element (from…
ipmcc
  • 29,581
  • 5
  • 84
  • 147
10
votes
3 answers

How to ensure a constant inside a component is only calculated once on start in React (Native) with hooks?

I am currently creating a React Native app and still am unsure about how to best handle states for my use case. I use react-native-svg to create a rather complex figure in the app, which is stored in a component, stays constant and is retrieved in a…
JoeBe
  • 1,224
  • 3
  • 13
  • 28
10
votes
2 answers

Animating width of in react-native-svg

I have simple animation interpolation going on for element, however I see no changes on my ui, as if width is staying 0. I manually added my end value to the component as width={149.12} and it displayed it correctly, hence I am a bit…
Ilja
  • 44,142
  • 92
  • 275
  • 498
7
votes
1 answer

React Native SVG - Setting SVG width and height cause the icon to be cut off

I have an SVG component, and I am trying to pass in width and height props in order to scale all my icons to the same size depending on the display. import React from "react"; import Svg, { G, Path } from "react-native-svg"; const GearIcon = props…
Sandra Willford
  • 3,459
  • 11
  • 49
  • 96
7
votes
4 answers

Expo 36: Unable to resolve "../../data" from "node_modules/css-tree/lib/syntax/default.js"

Got this error after upgrading expo 35 to 36. Unable to resolve "../../data" from "node_modules/css-tree/lib/syntax/default.js" I've tried to yarn add css-tree. This error was gone, but then module react-native-svg started giving the same error…
stkvtflw
  • 12,092
  • 26
  • 78
  • 155
7
votes
1 answer

Multiple Line Charts using react-native-svg-charts

I am trying to put multiple line charts showing different data in one graph but am unable to do so in react-native using react-native-svg-charts.
xyz6675
  • 355
  • 2
  • 6
  • 17
6
votes
2 answers

pand and zoom SVG image but when zoom in the image is not sharp

I am developing an React Native project. Our backend returns a URL which points to a remote SVG image. I need to not only show the SVG but also be able to pan and zoom it in the mobile app. To show remote SVG image, I use react-native-svg…
Leem.fin
  • 40,781
  • 83
  • 202
  • 354
6
votes
3 answers

How to listen to value change in react-native-reanimated?

I have created a simple animation with Animated from react-native with react-native-svg. This do the jobs well, But Now I switched to react-native-reanimated cuz I read on their website that reanimated is faster than Animated from react-native. But…
Muhammad
  • 2,572
  • 4
  • 24
  • 46
6
votes
1 answer

React Native svg clip path on image not working

Trying to clip an Image component with an svg ClipPath is proving problematic. I can clip a Rect no problem, but when I replace the Rect with an Image, nothing shows up. octogon.points = "80,0.3 23.6,23.6 0.3,80 23.6,136.4 80,159.7 136.4,136.4…
Tobe_Sta
  • 448
  • 6
  • 20
5
votes
0 answers

React-Native-SVG: Masked elements pixelated in android emulator

In my app I have this code:
injecteer
  • 20,038
  • 4
  • 45
  • 89
5
votes
3 answers

react-native-svg-transformer not working with the metro.config.js file

I am currently trying to use React Native SVG to render SVG components in my RN app. However, the metro.config.js configuration causes some errors I cannot seem to resolve. I have installed react-native-svg and react-native-svg-transformer and…
Justin Li
  • 93
  • 1
  • 8
5
votes
1 answer

React Native Reanimated 2 animating the length of an SVG Path

I'm trying to animate an SVG path's length form 0 to it's full length in React Native Reanimated 2. Here is my sample path: const AnimatedPath = Animated.createAnimatedComponent(Path); const animatedProps = useAnimatedProps(() => { const path = …
ReactNativeDev
  • 51
  • 2
5
votes
2 answers

Android - Task :app:mergeDexRelease FAILED

please consider that I'm not very familiar with Android development. Trying to generate the Android signed bundle for my React Native app, I've stumbled upon the following error: Task :app:mergeDexRelease FAILED D8: Program type already present:…
thiagobrez
  • 93
  • 1
  • 1
  • 7
5
votes
2 answers

How to draw a circle with n slices

I am using react-native-svg module and I want to draw a circle divided to n slices. My circle radius is 41 and the center of it is (50, 50) for example for n=6 I want to draw something like this:
itay312
  • 1,518
  • 4
  • 24
  • 36
5
votes
1 answer

How to show SVG files in react-native

I want to render images from SVG files generated by illustrator, I am using react-native 0.59, react-native-svg and react-native-svg-uri, Here's my jsx:
ketimaBU
  • 901
  • 4
  • 15
  • 35
1
2 3
…
18 19