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

The above error occurred in the component

I have a bug that has been giving me a lot of headaches, I intend to put .svg images into my project and I have tried several ways although it always gives me an error... I am using the lib react-native-svg and I am doing it the following…
Afonso Salvador
  • 45
  • 2
  • 9
2
votes
0 answers

Add on Press event on react-native-svg inner element

I have an XML svg like this, I want to add an onPress event on tag (i want a rounded area to be a touchable not the whole SVG)
Parham Heidari
  • 316
  • 3
  • 14
2
votes
2 answers

How to animate react-native-svg Polygon element?

Is there a simple way to animate the Polygon element from the react-native-svg library? I need to animate his shape by animating the points. I found few examples on how to animate Path element or Circle, but couldn't find anything regarding the…
cinemanja
  • 481
  • 6
  • 19
2
votes
1 answer

react-native-svg: Custom text inside the SVG icon

I am new to react-native I'm trying react-native-svg to create a SVG icon, In that SVG icon I want add a Text on top of the icon like this Image. I have try lots of way but could not able to succeed. This is my SVG file import Svg, { Circle, G,…
Krisna
  • 2,854
  • 2
  • 24
  • 66
2
votes
2 answers

Showing SVG image with 'react-native-svg' library, however encounter 'Unrecognized font family' error in iOS (Android works fine.)

My react-native version is "0.62.2". In order to show remote SVG images, I use react-native-svg library in my React Native project. I use it like: import {SvgUri} from 'react-native-svg'; const MyScreen = ({route, navigation}) => { ... ... …
Leem.fin
  • 40,781
  • 83
  • 202
  • 354
2
votes
1 answer

React-Native-SVG Error: Invariant Violation: requireNativeComponent: "RNSVGGroup" was not found in the UIManager

I Try to create a SVG in React-Native using react-native-svg. I have setup a React-Native-CLI. I google a bit and try to solve it my self and i find something usefull. I try to cd ios && pod install. I dont know what pod is but i used it. And i get…
Tobias K.
  • 21
  • 4
2
votes
0 answers

Add shadow to progress circle using react-native-svg

I have a progress circle that I'm implementing with react-native-svg and the white circle indicates the target progress. However, sometimes the progress exceeds 100% and I want to create a semi-circular shadow on the top of the outer progress circle…
Josh
  • 827
  • 5
  • 7
2
votes
1 answer

Animating the React-native-svg

I'm trying to animate the SVG by this code: //create animated path component const AnimatedPath = Animated.createAnimatedComponent(Path); P1 = new Animated.ValueXY({x: 0, y: 1}); P2 = new Animated.ValueXY({x: 1, y: 1}); P3 = new…
Phaoga55
  • 71
  • 1
  • 11
2
votes
1 answer

Positioning icon in SVG in React Native

Background: I am trying to add a tooltip to a react-native-svg chart following this tutorial. The link to the tutorial: Link Current Code Implementation: import React, {useState} from 'react'; import {View, Text, Dimensions} from…
Blake
  • 157
  • 4
  • 13
2
votes
1 answer

React Native funnel chart

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?
Tutu
  • 99
  • 1
  • 2
  • 14
2
votes
3 answers

React Native SVG is using unsupported JSX namespace tags. How to set throwIfNamespace to false?

I am trying to use kristerkari/react-native-svg-transformer, but I get following error after I run the metro: error: assets/menu.svg: /user/Projects/mobile/assets/menu.svg: Namespace tags are not supported by default. React's JSX doesn't support…
pr0gramist
  • 8,305
  • 2
  • 36
  • 48
2
votes
1 answer

Apply vertical linearGradient to svg Lines and Circles

I try to create a SVG circle with vertical linear gradient on it using react-native-svg according to the docs. This is how the code looks:
Valeria S.
  • 338
  • 4
  • 19
2
votes
0 answers

React-Native-SVG "No Stop in Gradient"

Description React-Native-Svg have issue for certain svg icon with gradient. Platform IOS 13.4 Android 6 and above react-native-svg - v12.1.0 Issue Here is the link to the svg file https://svgshare.com/i/L5A.svg I export using SvgCss and the…
Burhan3759
  • 81
  • 1
  • 4
2
votes
1 answer

Rounded corners for Arc Progress in react-native-svg

I've created an Arc Progress based on a tutorial (v. https://www.youtube.com/watch?v=UMvw20nRZls) and worked fine But, since i have no experience using svg path, i'm struggling with my Arc trying to get it's corners rounded Here is how the Arc's…
Jorge Camargo
  • 87
  • 1
  • 8
2
votes
0 answers

How to animate gradientTransform property with react-native-svg and Animated

How to animate property gradientTransform in react-native-svg by using Animated? import React, { useEffect, useState } from 'react' import { Dimensions, Animated } from 'react-native' import Svg, { Path, Defs, …
Daniel
  • 839
  • 10
  • 20
1 2 3
…
18 19