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

How can I add a point by clicking in a rect?

I have an SVG (react-native-svg) wrapped by a TouchableOpacity tag. How can I add a dot on the point I click?
Συμεών Τασκάρης
  • 21
  • 6
0
votes
1 answer

Svg is not showing in React Native

I am currently trying to develop a react Native app. My goal is to add two axis in the background using an svg vertcial line and an svg horizontal line. Here you can see the mockup : I was able to add the horizontal line by using an svg to jsx…
owdji
  • 151
  • 2
  • 12
0
votes
1 answer

Not able to import @/screens/AreaChartScreen/chartAdds in react-native

I want to add Dots in my react native Line Chart component. I have installed react-native-svg and react-native-svg-charts. I need to import Dots, Line, Gradient from '@/screens/AreaChartScreen/chartAdds' but the import statement does not work.
Ankush
  • 61
  • 4
0
votes
0 answers

react-native-tvos - TouchableOpacity Causes SVG Elements to Disappear

I am using react-native-tvos to create an app. I am trying to display SVG elements that respond to the remote. I have tried using TouchableOpacity as well as Pressable on the elements. Whenever I wrap the elements with those they no longer…
MPIIIMan
  • 3
  • 1
  • 1
0
votes
0 answers

React Native SVG Not click onPress Android device

The function in the line of code below works fine on IOS, but not on Android. Why could it be? changeCeiling(ceilingCount === 0 ? "#F7CB52" : ceilingCount === 1 ? "#EB4573" : "#00B8FE")} fill={ceiling} id="Path_3647" …
Uğurcan
  • 91
  • 6
0
votes
1 answer

Svg icon does not look the same using react-native-svg compared to standard html

I exported in svg format an icon designed in Figma and copied it into my react-native project as seen here, the only change I have done to adapt it to react-native-svg is to use high-caps on Line and Svg. import React from 'react'; import {…
Kronax
  • 69
  • 7
0
votes
0 answers

react-native-svg "rect" height: 100% not filling screen

Cannot get Rect to fill screen. Example Snack: https://snack.expo.dev/7hfIOdDDX Demo Code: …
user16967562
  • 924
  • 1
  • 13
0
votes
1 answer

Svg height doesnt match with parent View height

I have an Svg here with a Line. I gave Line stroke width as 10. The svg is wrapped in View with height same as stroke width 10. But somehow the Line doesn't align with the Parent height? What is causing the height difference? import * as React from…
lch
  • 4,569
  • 13
  • 42
  • 75
0
votes
1 answer

How to remove the weird margin of the icon

I have a Microphone Icon with these properties: export function MicrophoneIcon({ width, height, ...props }: MicrophoneProps) { return (
Vagner Wentz
  • 391
  • 1
  • 7
  • 29
0
votes
1 answer

My package is using react-native-svg, package is listed in node_modules after npm i but getting err

I have developed an npm package for React Native (myPackage). As might you know React Native doesn't have built-in support to handle SVG images so I am using this package react-native-svg for handling SVGs in my myPackage After developing I have…
Muhammad Qasim
  • 101
  • 1
  • 4
0
votes
0 answers

React Native - different behavior when turn on debugger (React Developer Tools)

I have a wheel that has 8 arcs, when I turn on debugger the arcs rendered correctly: But when I turn the debugger off, the arcs position is just messed up: I tried to build a release version and still got the wrong result. Here is my code: import *…
Huan Huynh
  • 399
  • 6
  • 16
0
votes
1 answer

Add SVG as background to React Navigation tabBar React Native

I have an SVG component (react-native-svg) that I would like to put behind a custom React Navigation tabBar component to act as a background for the bottom tabs navigator. I've tried a few different methods through styling and have arrived here…
patataskr
  • 325
  • 5
  • 15
0
votes
0 answers

How to use an SVG to make a hole in a (React Native)

I have made an orange View And I want to use an SVG to carve out a hole out of the view (I'm rendering the curve in blue with react-native-svg) How can I "carve" a hole out of that View? Should I instead make the View an Svg? If so, I like having…
akai
  • 352
  • 1
  • 6
  • 16
0
votes
0 answers

react native svg onPress event not working on real device

I'm using react native svg and facing issue that it's onPress event is not working on real device but working fine on emulator. I search for solution but none of them worked for me. Here is my code const Labels: FC = ({ …
Kanwarjeet Singh
  • 144
  • 1
  • 12
0
votes
1 answer

How can I make this curved svg pressable?

I want to have a curved svg and want to ask you how to can I make this red circle pressable ? Curved Bar
universe11
  • 703
  • 1
  • 11
  • 35
1 2 3
…
18 19