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
3
votes
0 answers

Interactive map for react-native

I am trying to create an application that makes use of and interactive globe map. The map should be able to zoom to specific countries and rotate according, styled as required etc. Terrain and road features are unneccessary. I have made a suitable…
Ibrahim Ayodeji
  • 126
  • 1
  • 7
3
votes
1 answer

Unable to resolve "./elements/Marker" - can somebody tell me what's wrong?

I have problem with my SVG Component. I think that I've did everything properly, but this after compiling I keep getting this error: Unable to resolve "./elements/Marker" from "node_modules\react-native-svg\src\ReactNativeSVG.ts" Failed building…
Patryk Krawczuk
  • 61
  • 1
  • 7
3
votes
2 answers

How to make text centered in the middle of a circle with react native svg?

This one is simple, but I'm kind of lost. How can I make the Text in the middle (vertical and horizontal) of the circle? Or everything in the middle of the Svg (and then the text will be in the middle of the circle) const size = width < height ?…
Vencovsky
  • 28,550
  • 17
  • 109
  • 176
3
votes
3 answers

Unable to resolve "./patternReg" from "node_modules\react-native-svg\lib\extract\extractProps.js

I am new in react native. After install new library of react-native-svg-from-uri. and used in my component like import SvgUri from 'react-native-svg-uri'; when running my app…
Abul Hasan
  • 53
  • 10
3
votes
1 answer

rendering network SVG images causes performance issues on android React-Native(I want to avoid use of React-Native-svg-uri)

I am want to render network images in React-Native i previously used ttf method and that works great but this method is used only for static images i want to render svg images with light weight method, I know some of the libraries are available but…
Waheed Akhtar
  • 3,110
  • 1
  • 16
  • 30
3
votes
1 answer

react-native-svg onPress event not working

I'm working with react-native-svg, as documentation says it's possible to trigger onPress event on svg elements but it doesn't work.
Emanuele Sacco
  • 411
  • 5
  • 20
2
votes
0 answers

Traverse and enrich downloaded XML in React-Native-SVG

In my app I have the following: axios.get( '/game' ).then( ({ data }) => this.setState( { game:data } ) ) ... render() { const { game } = this.state return {game && } } That works like a charm so…
injecteer
  • 20,038
  • 4
  • 45
  • 89
2
votes
0 answers

In react-native-svg, how can I prevent from being cut-off in a ?

I am creating a simple compass with North, East, South, West directions. I created a TextPath so that my Text can curve along the circular compass. I am facing one major problem: the beginning of the Text is being cut-off. I cannot see the complete…
TIMEX
  • 259,804
  • 351
  • 777
  • 1,080
2
votes
0 answers

How can we cache Svg's using SvgUri in react-native-svg?

I'm using SvgUri component from the react-native-svg package. Is there any way to cache these SVG's? I found this issue on github, but the mentioned solution there didn't work for me.
zappyyy
  • 21
  • 1
2
votes
1 answer

SVG icon showing cutoff on android in react native

I am using lib react-native-svg to display SVG in my mobile app. In iOS, it is showing properly but on android, it shows cutoff. I will also attach a screenshot for reference, Can someone please help me how to solve this problem? iOS…
Jone
  • 21
  • 1
2
votes
2 answers

"null is not an object (evaluating '_reactNative.NativeModules.RNShare.FACEBOOK')" Import raising Issue

I'm currently trying to build an App with React Native in which the user can enter data, generate a QR-Code and then also share that same QR-Code. Entering the Data and generating the QR-Code is working as intended. However the sharing is what's…
toni
  • 21
  • 1
  • 3
2
votes
0 answers

Exception thrown while executing UI block: [NSNull doubleValue]: unrecognized selector sent to instance 0x204329c00

I am trying to display icon relative to specific coordinates on a map, but I keep getting this error thrown, followed by: removedChildren count(0) was not what we expected (1) This won't allow the pin to show up on the map. Below is my code: const…
MK_Pierce
  • 916
  • 2
  • 10
  • 26
2
votes
1 answer

react-native-svg: LinearGradient doesn't change between components when given different colors

I have a component that generates a square linear gradient using react-native-svg. When I pass in different hue colors, it stays the same color. Things I tried: Passing in hex instead of hsl colors and the issue still arises What am I…
wongz
  • 3,255
  • 2
  • 28
  • 55
2
votes
1 answer

How to properly render SVG in React Native

Hi Have the following code in our react native application: import { SvgCssUri } from 'react-native-svg'; I have even tried to use simple SvgUri…
Yif Swery
  • 179
  • 1
  • 12
2
votes
0 answers

react-native-svg Image defined in Pattern located on wrong coordinates

I have a .svg which looks like this: So those are a few rectangles with border radius that have image as a background. That .svg was exported from Figma and I used react-svgr.com to convert it to a React component which looks like this: import Svg,…
MrWhite
  • 179
  • 3
  • 11
1 2
3
…
18 19