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
1 answer

How do I compensate for a rotated container view in my circular slider component?

I have successfully pieced together a circular slider component from various, partially-documented code snippets (mainly here). I've tidied things up a bit and now have something I can use as a slideable control dial in which I can set an arbitrary…
sinewave440hz
  • 1,265
  • 9
  • 22
1
vote
0 answers

How to search the JSX file in react native

I have a svgComponent JSX file in react native. in that I have almost 200 path components. i want to plot some circle on this world map based on data getting from API. how to search the path component and get cx and cy values from path in JSX,given…
Manish Kumar
  • 997
  • 2
  • 13
  • 30
1
vote
1 answer

Masking Image With Hollow Circle Shape & Blur

I'm trying to create the below crude example using react-native-svg. The background image is dynamic and requires a hollow circular mask. This also needs to blur that section of the background image. Whilst I can get a cutout blurred with no…
wbdlc
  • 1,070
  • 1
  • 12
  • 34
1
vote
1 answer

How can I make a circular graph with SVG in React Native?

I'm trying to draw a circular graph with SVG in React Native. I want to add a stroke to the chart. How can I do it? I did this. This is what I want to do. Code: return (
Blogger Klik
  • 160
  • 1
  • 2
  • 12
1
vote
1 answer

Drawing with SVG across different phone screens using React-Native-Vision-Camera

I'm trying to render a pose onto a camera screen with SVG and react-native-vision camera. It works fine on the normal 16:9 aspect ratio but on my friends iPhone Pro Max, which is 19.5:9 then the pose doesn't match up with the body. It's in the…
Evan Ledahl
  • 53
  • 5
1
vote
0 answers

Scaling a G-Group in RN-SVG

In my app I procedurally create an SVG with this code: const AnimatedG = Animated.createAnimatedComponent( G ) const transform = 'translate(63.359 83.424)' const scale = [ 1, 1.04 ] // [ 1, 1 ] return
injecteer
  • 20,038
  • 4
  • 45
  • 89
1
vote
0 answers

java.lang.Double cannot be cast to abi48_0_0.com.facebook.react.bridge.ReadableMap Error when using svgs on Android

Waddup salty members of stackoverflow. I have a react-native app with expo and have been developing on IOS for some time. When I finnaly got around to getting an android phone to test on for android. Everything in the app runs apart from the…
sebastian chapman
  • 11
  • 4
1
vote
0 answers

React native svg not working on RN Version 0.71.2

Im trying to add svg on RN app. for that installed npm dependencies: 1) react-native-svg 2) react-native-svg-transformer. but may be due to latest React Native version 0.71.2 it is not working. import React from 'react'; import {View} from…
Humendra
  • 11
  • 1
1
vote
1 answer

SVGR removing style tag in react native expo appliction and svg component is not rendered in android in React native expo app

I have .svg file which I am converting svg component using SVGR. But SVGR has removed style tag in my .svg file. This was original .svg file with style tag viewBox="0 0 385.11 279.06" style="enable-background:new 0 0 385.11 279.06;"…
spjgoku
  • 71
  • 1
  • 6
1
vote
1 answer

Text strings must be rendered within a component error when using svg in android device using react native expo app

I am using react native expo to create web, ios and android app. I have an svg image url. I am using SVGR to convert svg image code into React native component and importing it as component in my app. It is working fine in web but on android it is…
spjgoku
  • 71
  • 1
  • 6
1
vote
0 answers

Error in using SvgXml from react native svg in react native svg app

I am creating react native app for (Web, IOS,Android). I have svg image that i want to render in web and android. This is my code : import React from "react"; import { SvgXml } from "react-native-svg"; const SvgComponent = () => { const…
spjgoku
  • 71
  • 1
  • 6
1
vote
0 answers

Using Svg images from url in react native expo application

I have React native expo app that works in WEB, IOS & ANDROID. I have installed react-native-svg to show svg images from URL. It is working fine with web , but on expo android emulator it showing unknown format. also using for loading svg from uri…
spjgoku
  • 71
  • 1
  • 6
1
vote
1 answer

Loading delay when using react-native-svg

I am using react-native-svg for handling SVG but i am noticing a delay when switching to a stack/screen that contains SVG. I am using a tabBar in react-navigation 6 to switch stacks/screens. When i have SVG in the screen as below i can notice a…
Quantal
  • 309
  • 1
  • 15
1
vote
2 answers

react native svg error child.isClassAccessorProperty is not a function on upgrading react native from 68.1 to 70.6

Thanks in advance I received the below error when I tried to upgrade react native from 68.1 to 70.6. I tried this in android. I ran react-native run-android and everything went well. Upon running the app the metro bundler started loading 99% and…
Ankit Jayaprakash
  • 1,040
  • 3
  • 15
  • 31
1
vote
0 answers

React Native Svg error: "Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager."

I have created a library of components and commands for react-native using "react-native-builder-bob" https://github.com/callstack/react-native-builder-bob. Trying to create an "Icon" component I imported "react-native-svg" and…
TheSnake
  • 200
  • 1
  • 1
  • 7
1 2 3
…
18 19