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

react-native-svg - Marker / Line markerEnd doesn't work on Android

Simply trying to draw an arrow line using the following code import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Svg, { Defs, Line, Marker, Path } from "react-native-svg"; export default function App() { …
iphonic
  • 12,615
  • 7
  • 60
  • 107
0
votes
1 answer

Draw a cured with style dashed in React Native

I'm trying draw a curved with style is dahsed like the picture below I'm using component Line in react-native-svg but only get the result as shown below How can draw curves? Many thanks !
a programer
  • 77
  • 7
0
votes
1 answer

how to make a stroke rounded

I'm creating a progress circle but I want the edge of the progress circle line to be rounded, this is how it looks and this is how I want it to look. here is my code const strokeWidth = 2; const center = size / 2; const radius = size / 2 -…
Daniel Döbereiner
  • 47
  • 5
0
votes
2 answers

react-native-svg undefined symbols dylib when compiling on iOS

I'm trying to compile a React Native app on iOS. Many times I encounter an error related to the linker, which essentially says that dylib reports there are undefined symbols, which are related to some pod modules linked to the project. In my case…
Adonis Gaitatzis
  • 3,189
  • 26
  • 24
0
votes
1 answer

How to manage dynamic fill with React Native SVG

I have some SVGs in my React native .66.1 app, and I've set up react-native-svg and react-native-svg-transformer and have set it up correctly. I can import my SVGs as components, and it all works as expected. However, I don't know how to dynamically…
Joel Hager
  • 2,990
  • 3
  • 15
  • 44
0
votes
1 answer

Multiple SVG icons as one component?

I can currently code SVGs in React-Native (typescript). This allows me to call them as individual react native components. Here's a made up example of what I can currently do:
Harry
  • 11
  • 2
0
votes
0 answers

Gradient SVG render on web but not on mobile

I'm using react-native-svg to render a chart, which contain a gradient, work perfectly on web, but when use the same code on react-native it won't work Here is the react-native code const data = [ {x: new Date(2000, 3, 2), y: 100}, {x: new…
CODEforDREAM
  • 863
  • 1
  • 8
  • 24
0
votes
1 answer

Victory charts - values are not aligned properly

I'm using victory chat to display line graphs on the basis of time. Also using Scatter plots to display points. Since I did not get events when I pressed in lines I ended up using scatter plots. In this example, you can see the values are aligned…
Sukesh
  • 167
  • 3
  • 14
0
votes
0 answers

React Native - Implementing Eraser Function in SVG

I'm implementing an Eraser for drawing on a React Native application. The drawings in the application were implemented using SVG. Found this very helpful answer on how to go about it by using Masks. However, after implementing that, an edge case…
Edwards Moses
  • 13
  • 1
  • 4
0
votes
1 answer

Using SVG Pattern as Background

React-Native-svg supports SVG pattern, however, I am not sure how to apply it... When I try the minimal example from the documentation, I get a blanc screen, white screen.
four-eyes
  • 10,740
  • 29
  • 111
  • 220
0
votes
1 answer

Set Background to an Image for Save to gallery

I have a qr-code in my react-native project from react-native-qrcode-svg like this: (svg = c)} />; I want to save this QR to the gallery! I use this code for…
Mohamadamin
  • 564
  • 5
  • 16
0
votes
1 answer

How to add circle to React Native progress bar

I've got an issue with the design. This is design: Are there any ways that we can add a circle to the top of the progress bar like this design? I'm using react-native-circular-progress library. I use almost props of the library. This is my…
Trí Lâm
  • 75
  • 3
  • 9
0
votes
1 answer

React native position absolute not on top

I have the code seen here in this snack https://snack.expo.dev/@ftoldghost/card-design I'm trying to get the blue circle to be on top of that green card element. The absolute position is working to place it in the right spot, but it's ending up…
abg
  • 319
  • 4
  • 10
0
votes
2 answers

Mapping multiple react native components

I have multiple react-native components (more than 100) each of which is different. To be more precise each component is actually a react-native svg component which looks like this import * as React from "react"; import Svg, { Circle, Path } from…
Aman Gupta
  • 23
  • 6
0
votes
1 answer

found 1 high severity vulnerability (react-native-svg)

I'm trying to create a SVG component. I have this problem after run command "npm i". I think versions between packages aren't compatible. How to fix this or create SVG component without react-native-svg package? Thank a lot.enter image description…
Thành Đạt Nguyễn
  • 21
  • 1
1 2 3
…
18 19