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

Treemap shape in React Native is not perfect (d3, react-native-svg)

I want to display treemap in react native and I found this blog. I tried to implement it in react native, it works but the shape is not perfect. I also tried to do in react, it works and the shape is perfect too. Sample Can anyone let me know what I…
KSA
  • 675
  • 1
  • 5
  • 9
1
vote
0 answers

React-Native svg with unknown dimensions

I am trying to display svg flag images from the REST Countries API, so that the flag is the width of the screen while maintaining its aspect ratio, meaning the height will change. This means the flags will not always be the same aspect ratio, so I…
Stephen
  • 11
  • 1
1
vote
1 answer

React Native d3 azimuthal equal-area rotate not smooth

I am doing the d3 azimuthal equal-area projection in react-native, i used this example for this. its working fine but im updating rotate values using panGestureHandler this is also working but it's not smooth and it's take time to update map. this…
yathavan
  • 2,051
  • 2
  • 18
  • 25
1
vote
0 answers

React native SVG onTouch functions vs onResponder functions

I am creating a mobile app with image editor. Right now I am using react native svg to draw lines on the image. I am wondering which built in gestures functions of SVG are more efficient, is it the onTouch functions (onTouchStart, onTouchMove,…
KKK
  • 507
  • 3
  • 12
1
vote
1 answer

Disappearing after pressing in 'react-native-svg'

I use SvgCss from react-native-svg for displaying and changing the color of several external svgs. I put onPress on it and it works as expected in most cases. but I noticed that some svgs have weird behavior after pressing on them. for example the…
MinaFa
  • 259
  • 2
  • 13
1
vote
0 answers

Animate an SVG object along a line or a path with React Native

Can someone help how to do it in React Native with reanimated and redash? I was trying to do it this way, but the app crashes everytime. const AnimatedCircle = Animated.createAnimatedComponent(Circle); const circleAnimation = useAnimatedProps(()…
Dima Os
  • 51
  • 1
  • 6
1
vote
0 answers

'No' string rendered as numero sign (No.) in react-native-svg Text element with a specific font (RyoGothicPlusN) on ios

The string 'No' renders as the numero sign № with the font RyoGothicPlusN-Regular on ios only. If I don't pass the font or pass something else f.e. Times New Roman, the string renders as expected. import { Text } from 'react-native-svg';
1
vote
1 answer

React Native get Element attributes from onPress event

I'm trying to create a digital coloring page in React Native. My goal is when a user presses on individual SVG paths it changes their fill color. The problem is that onPress event handlers cannot be applied to Paths specifically, so I had to add it…
Travis Hoki
  • 198
  • 1
  • 15
1
vote
1 answer

Grouping Multiple Data with react-native-svg-charts

Hi I want to achive this kind of chart with 2 datasets by using react-native-svg-charts and my data look like this const data1 = [ {label: 'bad', svg: {fill: '#E55300'}, value: 5}, {label: 'marginal', svg: {fill: '#EB742F'}, value: 10}, …
1
vote
1 answer

React native SVG filled in black

I am trying to use my .svg file in my React Native app using react-native-svg but the result is a SVG filled with black. Instead of this: I got this: my code for this SVG is the following. I suppose that the xLinkHref tag has no effect on the SVG…
brpinto
  • 25
  • 4
1
vote
1 answer

How do I add Gradient Colour to this React Native Chart?

Current Implementation: This is a Chart using react-native-svg library with a tool-tip added to it. I want to make the color of the line into a gradient rather than a single color Code: import React, { useState } from 'react' import { View, Text,…
1
vote
1 answer

Uncaught Error: ReferenceError: Can't find variable: React for react-native-svg on Expo

I want to render simple svg on Expo, but the below error code is shown. Uncaught Error: ReferenceError: Can't find variable: React My code: import * as React from 'react'; import { Component } from 'react'; import { View, Text} from…
sauceishere
  • 326
  • 5
  • 15
1
vote
1 answer

Building custom chart on React Native

Task at hand: What I've taken a lot at so far: Pie chart from [https://github.com/JesperLekland/react-native-svg-charts-examples][2] Here I divided the entire pie into 50 units of 1 value, inorder to get the Split-bar effect. I can pass the color…
1
vote
1 answer

How do I track the currently-touched element while the touch point moves between multiple touchable elements?

I have a UI like this: You are touching: {touchedBoxId} ______________ |container | | __ __ __ | | |a ||b ||c | | You are touching: a | |__||__||__|…
theguy
  • 861
  • 9
  • 19
1
vote
1 answer

react-native-chart-kit Line chart with 1 segment doesn't print y-label

I have the below code where there are only 2 values on the y-axis which means a single segment should suffice. But it turns out the y-label for the top line doesnt come up. Is there a fix for this? Current Chart state Below is the code I have…