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

LinearGradient in react-native-svg not working

I am trying to use SVG in my react native project. This is the code for my component:
Saumay Paul
  • 405
  • 1
  • 7
  • 21
4
votes
1 answer

React Native Flatlist element onPress not fired until List rendering is complete

I have a FlatList that receives (immutable) data of max. 50 elements and it renders in each list item Svg using react-native-svg. Parts of the graphics are wrapped with a Pressable component for selecting the element. Now the problem is, that I…
4
votes
4 answers

React Native css-what high severity vulnerability

Context In my react-native application, I am getting a high severity vulnerability regarding a package called css-what. In which it apparently is resulting in 4 other vulnerabilities because they directly or indirectly depend on css-what. Here's the…
4
votes
1 answer

How to cancel SvgUri request when component will unmount

Warning: Can't perform a React state update on an unmounted component. This is an no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous task in "a useEffect cleanup function". My component…
Ikram Ud Daula
  • 1,213
  • 14
  • 21
4
votes
0 answers

react-native-svg: cannot create svg from xml

Hi I was trying to generate an svg on react-native app with react-native-svg, as per the docs I used SvgXml to generate svg from xml but it was not working. Here is the svg component: import React from 'react'; import { SvgXml } from…
suvodipMondal
  • 656
  • 10
  • 27
4
votes
2 answers

onPress is not working on the SVG Path on iOS using react-native-svg

When I press anywhere on the arc shown below, on Android, onPress is always called properly but on iOS, sometimes onPress is called but sometimes it doesn't. Some part of the arc is not clickable on iOS. Also, there isn't any positioning…
Aniruddha Shevle
  • 4,602
  • 4
  • 22
  • 36
4
votes
1 answer

EXPO react-native-svg Error:- "Error while updating property 'd' of a view managed by: RNSVGPath null . For input string: "c"

There seems to be an issue with the react-native-svg and android. This error is being thrown in my Android app only - the iOS app seems to be fine? The error message gives me no indication as to where the error may be occurring. Any ideas would be…
4
votes
1 answer

React-native icon inline with text

Hi I want achieve the following style: But with the following code i get a the icon in separate column and the text in another It is a long established fact…
4
votes
2 answers

How to create a circular slider with breakpoints?

I am new to react-native and i want to achieve the below design in react-native The blue circle is a slider to chose the date(Date Picker) The circle inside the slider(Date Picker) changes color when the date is changed and finally an image…
4
votes
1 answer

Error while updating property 'width' in shadow node of type: RNSVGsvgView

I have encountered this error after installing react-native-svg. I have all svg icons in a separate .js file and calling them as follows, as per this Solution, What…
ThinkAndCode
  • 1,319
  • 3
  • 29
  • 60
4
votes
0 answers

TouchableOpacity not triggering clicks when nested inside react-native-svg

I have a TouchableOpacity nested inside SVG element create by using react-native-svg library. It looks something like this: (...)
Sebastijan Dumančić
  • 1,165
  • 1
  • 11
  • 20
3
votes
0 answers

React Native Reanimated + SVG + Custom Component Not Animating

I am trying to create a custom svg component (a rocket) that I then turn into an animated component using reanimated, so that I can move the rocket across the screen! Rocket: Rocket: class extends React.Component { render() { …
3
votes
1 answer

some SVG image urls not loading - react native svg uri

I am using "react-native-svg-uri" library to load svg files from cloud. consider the following snippet,
Dhevendhiran M
  • 994
  • 2
  • 12
  • 29
3
votes
0 answers

Problems with react-native-svg-transformer and typescript

I decided to add typescript in a existing project and have a issue when a i works with import of .svg like a this import Icon from "../../../assets/Icon.svg"; i tried configure metro.config.js const { getDefaultConfig } =…
3
votes
1 answer

How to display svg, png, jpeg images in React-native?

I used tag to display images in my project, but it's not displaying the svg images on the iOS, so i used from the react-native-svg instead of , but now if i try to show any images other than svg, it's throwing error. Is there…
Srinath
  • 88
  • 7
1
2
3
18 19