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

Is it possible to make a continuous react-native-svg animation of sine curve?

I am trying to make a sine curve slowly move and appear continuously, exactly like this (the one on the right): Is it possible? If so, how would I approach it?
N3sh
  • 881
  • 8
  • 37
0
votes
0 answers

How to animate an SVG circle dynamically given a list of values?

I have a list of values such as: [10, 20, 20, 30, 10, 10, 10, 20, 20, ...] That can change before the animation starts. The goal is to take an SVG circle and do the following: Index i = 0 Smooth set radius to list[i] over X seconds Increase…
N3sh
  • 881
  • 8
  • 37
0
votes
1 answer

How to render labels along the circumference of PieChart component from react-native-svg-charts?

Here's a snapshot of my code: const data = filteredKeys.map((key, index) => { return { key, value: filteredValues[index], svg: { fill: colors[index] }, arc: { outerRadius: 70 + filteredValues[index] + '%', …
Vold
  • 29
  • 9
0
votes
1 answer

SVG draw and erase in React Native

I am trying to create a sort include/exclude feature in a react native app, where a user can draw on an image to shade or unshade an area to include or exclude it, so that only items in the include(shade) area will be processed. I have gone through…
Cannonball2134
  • 21
  • 2
0
votes
0 answers

Align react-native-svg into View component

View style: export const ImageView = styled.View({ alignItems: 'center', justifyContent: 'center', backgroundColor: 'red', }); import svg file: import MyImage from '../../assets/myImage.svg'; Render usage:
Flávio Costa
  • 895
  • 5
  • 18
  • 41
0
votes
1 answer

How to create curve in react navigation 5 bottom tab

I want to create bottom tab like this I want to implement this design in react navigation 5 bottom tab navigator. I'm using createBottomTabNavigator, Is this possible?
sarath chandran
  • 13
  • 4
0
votes
0 answers

SVG with large viewbox is not appearing on mobile device with react-native-svg

I have tested my svg on web and it works. I've tested other random svgs on my mobile device via react-native-svg and those work. But when I try to use my svg on my mobile device it does not appear. This is the viewbox: viewBox="2028857.351440589…
Charles Pettis
  • 337
  • 1
  • 3
  • 11
0
votes
0 answers

How do I pass a stylesheet to a Local SVG Vector Image in React Native?

I can determine the width and height inline But if I try to pass a width and height using a stylesheet then the width and height aren't inherited const styles =…
kwaalaateimaa
  • 111
  • 4
0
votes
1 answer

ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number

I want to use svg file in my React native App, for that i have follow the documentation of react-native-svg package and try to implement manual linking way to use svg images.But I have got the error of Error: Element type is invalid: expected a…
vj techno
  • 53
  • 4
0
votes
1 answer

react-native [Expo]: can I increase PanResponder's input sampling rate?

I am currently implementing a react-native-svg based drawing input for my Expo application (it is a slight modification of this answer: link). I use a PanResponder to register move events and create different paths that I then display as multiple…
marinoandrea
  • 81
  • 1
  • 7
0
votes
0 answers

React-native-svg loading animated svg file from url

I am using "react-native-svg": "^12.1.0" and am opening svg this way: If the svg on url is animated, the animation is not shown in my application. If I click on the link…
schmru
  • 591
  • 3
  • 8
  • 29
0
votes
1 answer

Creating a text cutout effect from shapes in react-native-svg

I'm goal is to create an ellipse with centered text using react-native-svg. I came across the ability to mask in their docs. The one thing I'm trying to figure out is creating a, cutout effect, similar to how it's done in CSS: The docs show how to…
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
0
votes
1 answer

Getting error when adding onPress to svg path

import React, { useEffect, useState } from 'react'; import Axios from 'axios'; import { Text } from 'native-base'; import { SvgCss } from 'react-native-svg'; const PaintObject = ({ svg, objData }) => { const [color, setcolor] =…
MinaFa
  • 259
  • 2
  • 13
0
votes
1 answer

React Native SVG: fullscreen adaptive viewBox

I'm trying to make fullscreen scene with "react-native-svg" library. That's my component render code:
Evgeniy Artemyev
  • 23
  • 5
0
votes
1 answer

unable to implement local svg image in react-native app

I am uanble to implement png converted svg to my react-native application even after installing below libraries "react-native-svg": "false12.1.0", "react-native-svg-uri": "false1.2.3", I am using latest react-native version and has followed all…
Saikat Saha
  • 772
  • 1
  • 16
  • 38
1 2 3
…
18 19