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

How to create line between react native elements (view/touchableopacity/button) to draw family tree

I'm trying to develop React Native mobile app to draw a family tree Any suggestion on how to draw line between the family member to create the tree, the element is touchableopacity. I have try using react-native-svg, but I cannot get the screen…
Antonius Hendrik
  • 41
  • 3
1
vote
1 answer

Line element from react-native-svg not working on iOS

I am trying to use Line element from react-native-svg however it does not appear when I use iOS but does appear on Android operating systems. Any suggestions? Thank you in advance
arec
  • 91
  • 1
  • 5
1
vote
0 answers

How to use linearGradient in react-native-svg

I have some SVG graphics that I would like to apply conditional styling on (e.g. linearGradient when it's active). How would I go about achieving this? I'd rather not (if there's another way) have to go in a manually add a defs tag with…
Joel Hager
  • 2,990
  • 3
  • 15
  • 44
1
vote
1 answer

Is there a way to access a clipped svg image to save back to the device in react-native using react-native-svg

I have a static image that I crop with a circle and now I want to save this modified image in my device's gallery, does anyone know how to do that? I am using TypeScript. Cropped image: import React from "react"; import { SafeAreaView } from…
alx1024
  • 21
  • 2
1
vote
1 answer

How to onPress and other Color in barChart on react-native-svg-charts

I want to put an event where I click on the chart and express the color of the chart differently. To do so, chart data was processed, but the processed option did not work normally. And after processing the data, additional SVG cannot be inserted…
hong developer
  • 13,291
  • 4
  • 38
  • 68
1
vote
0 answers

Better way to implement step bar animation in React Native?

I'm currently creating a step bar animation that has this sort of functionality with a FlatList for the bar's percentage. ( I used this youtube tutorial for reference https://www.youtube.com/watch?v=SLbay2efwso ) in between the bars there are going…
Franchesco Livado
  • 21
  • 2
1
vote
0 answers

Detect all borders of the SvgText in React Native

I am creating an android/ios app. One of the features that I want to implement are drawing within the given shape (letter). Currently I got a component that puts random English alphabet capital letter on the screen and allows user to draw with…
Karolis Kajenas
  • 1,523
  • 1
  • 15
  • 23
1
vote
2 answers

React-native-reanimated translate transition on React-native-svg group not working

I am trying to acheive a simple animation of a group of svg elements. The group should start off the top of the (landscape forced) viewport (translateY: -900) then transition in dropping from off the top of the screen into the viewport (translateY:…
Anthony Cregan
  • 960
  • 11
  • 25
1
vote
1 answer

SVG getting cut in react native

I am using react-native-svg with react-native-svg-transformer for rendering SVGs in our app. All SVGs are rendering correctly except this one SVG which just cuts off at its right side. This is the rendered SVG (The right side of the svg is…
Soham Gadhave
  • 85
  • 1
  • 7
1
vote
1 answer

Why does this error 'TypeError: undefined is not an object' occur

I am trying to load up a star.js with an svg-image. I am using Ubuntu version 21.04. And i have used the command expo install react-native-svg. Below here is my file. import React from "react"; import styled from "styled-components"; import { Text,…
john
  • 1,299
  • 1
  • 12
  • 22
1
vote
1 answer

How to make a circular countdown / gauge to show days left in react native

I want to make a circular progress bar which shows the number of days to expire like nowadays we see an airtel payment app which has a circular disc which shows daily data left, validity, etc.. i wanted to implement something like that....in react…
Shru_v
  • 29
  • 7
1
vote
1 answer

How to render a point on a gradient arc?

So I have an SVG component that renders an arc with a color gradient as shown below. Currently, it's just the arc but no grey point. What I want to do is programmatically pass values into the component so that the grey dot moves along the arc as the…
locke
  • 27
  • 7
1
vote
0 answers

Use double values in SVG size provide view cut on React Native

Use double values in SVG size provide unexpected behaviour (view cut on left and bottom points) on React Native. On mobile it don't denend on justifyContent or alignItems, but in codesandbox.io it…
Andrew Zbranevich
  • 9
  • 3
1
vote
2 answers

React native svg not rendered correct

We are working on a Vue/ReactNative project and have the strange phenomenon that in the Reactnative component react-native-svg (version 12.1.0) the SVG is not rendered correctly. In the browser it is rendered correctly. The SVG itself was created…
pbachman
  • 934
  • 2
  • 11
  • 18
1
vote
2 answers

Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple

I'm trying to call a svg image icon and text inside a TouchableRipple in react-native Here is my code: import ShareButton from "./assets/button.svg"; ...... ......
Rahman Haroon
  • 1,088
  • 2
  • 12
  • 36
1 2 3
…
18 19