284 questions
0
votes
0
answers
146
views
React Native Reanimated interpolateColor issue
I have a simple animated circular progress using react-native-svg and react-native-reanimated.
This is the AnimatedCircle
<Svg height={"90%"} width={"90%"} viewBox="0 0 100 ...
- 3
0
votes
0
answers
41
views
React Native: TypeError with SvgText component on Android but not on iOS
Problem
I'm working on a React Native project using TypeScript and react-native-svg to create an AttendanceCard component that includes a circular progress chart and percentage text. The component ...
- 123
0
votes
0
answers
249
views
How to read SVG asset using react-native-svg-transformer with Expo
I tried to install react-native-svg-transformer into my Expo project, so I can
load PNG and other image files from assets,
transform SVG files,
use @/src/... as alias.
When I start the project, I ...
- 4,967
1
vote
0
answers
25
views
Am trying to create a progress ring that has 1 point on top of each other at complete rotation
Am trying to create a progress ring or circular progress that looks like the image below 👇
(https://i.sstatic.net/AJWAj408.jpg)
But I can't seem to get that clipping effect. This is what I always end ...
- 11
1
vote
3
answers
197
views
Progress border around an Elliptical or Rounded-Rectangular View in React Native
I'm working on a React Native project where I need to display a progress indicator that outlines a non-circular view.
I tried using react-native-svg with the Circle component to create a circular ...
- 848
0
votes
0
answers
26
views
react native svg zooming, losing the view point
I've implemented a complex svg zooming functionality for the application I'm working, it was working fine with below coad
render() {
const { canvasHeight, canvasWidth, viewStyle, canvasStyle, ...
0
votes
1
answer
83
views
React Native DWG to SVG conversion issue
I am building a facility management app. I have been given a .DWG file of the floor plan that I want to show on the app and make the desks and chairs clickable so that employees of that facility can ...
0
votes
1
answer
115
views
massive frame drops on reanimated pinch and pan gesture using reanimated on react-native-svg
I am trying to implement pinch and pan gestures to move and zoom an SVG. This SVG has multiple paths, and I am trying to implement zoom without losing any quality of the SVG, so I have to scale the ...
- 159
0
votes
0
answers
21
views
I'm using the SvgUri package to render images. But not able to see while the app taken but connected via usb is working
This how I have imported
import Detail_R_Arrow from '../assets/images/detailRarrow.svg';
export {
Back_Arrow,}
This is my import statement
import SvgUri from 'react-native-svg-uri';
This how I ...
- 1
0
votes
0
answers
55
views
RN Error during bundling while setting SVG
I'm a student new to React Native. I was setting up the svg library to use the svg file to create a hands-on project with TypeScrit. However, when I insert those libraries, the same error occurs. How ...
- 1
0
votes
1
answer
107
views
SVG Path with Rounded Ends
I'm trying to create a filled ellipse graph in React Native using react-native-svg that visually indicates a percentage. The filled part should have rounded ends, but I'm struggling to get the ...
- 13
0
votes
0
answers
61
views
how to make pressable svg on react native
I have an svg and i need to make some paths/circles pressable using react-native-svg.
Path seems accepting onPress props but on second render it goes undefined, maybe some typescript bug, i didn't ...
- 115
0
votes
1
answer
1k
views
Using Playwright - how to test SVG image by d values?
In the website I'm automating, there are SVG images with icons.
In once scenario, the SVG has a special arrow that points up and right.
<svg class="SecretClass" focusable="false" viewBox="0 0 ...
- 1,672
1
vote
2
answers
468
views
Cannot build my app on Expo due to dependency issue with React Native svg charts
I have recently made an app and I am trying to build it for TestFlight.
In my app I started using react-native-svg-charts which uses react-native-svg.
These are the version in my package.json:
"...
- 3,909
0
votes
0
answers
47
views
React Native Remote SVG use
I am using react native 0.73 and trying to use remote svg images. SVG url https://hdor.com/app/assets/images/hdor-2021-icons/badges/bw/25km.svg this is the url which i am trying to use in my ...
0
votes
1
answer
199
views
Error trying to use react-native-chart-kit
I have this error every time I install react-native-chart-kit using expo and try to run the server
ERROR Invariant Violation: Tried to register two views with the same name RNSVGRect, js engine: ...
- 1
1
vote
1
answer
798
views
React Native v0.74.1 unable to resolve module when importing svg
I can't show the svg files on the new React Native version (0.74.1). I've added:
react-native-svg-transformer and react-native-svg
I followed the documentation and created the file declarations.d.ts ...
- 188
0
votes
0
answers
32
views
Cannot drag when child component has onPress in ReactNativeZoomableView - React Native
as seen in the code I shared below, there is an onPress in the Path in ReactNativeZoomableView. The dragging function works successfully from areas not covered by this path, but if I try to do this on ...
- 1
0
votes
1
answer
52
views
In SVG, how to center Text along a path?
Objective: Create a curved Path from A to B. Center the text on the path.
It doesn't seem like this is possible.
In my example below, startOffset=50% will begin the text at the 50% mark. However, I'd ...
- 271k
0
votes
0
answers
54
views
SVG separately animation
i am trying to code an Analog Clock using React Native, React Native SVG.
this must be set by hand. i don't want to code dynamic clock. (There are tons of them on the internet.) i want to code just a ...
1
vote
0
answers
164
views
React native svg transformer does not color svg using replaceAttrValues
I'm trying to color a svg using react-native-svg-transformer and react-native-svg but it does not work. I have the impression that the file .svgrrc is not taken into consideration because wether I ...
- 11
2
votes
1
answer
3k
views
Adding react-native-svg gives error - FAILURE: Build failed with an exception
When trying to run react-native app on android, I get this error:
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-svg:compileDebugJavaWithJavac'.
&...
- 195
0
votes
0
answers
82
views
React native SVG transformer imported SVG misses coordinates properties
In a previous Ionic app I'v used an SVG viewbox to layout an app screen with multiple SVG files to make a complex combination. The viewbox ensured that the ratio remained correct over all devices. For ...
- 11
-1
votes
1
answer
82
views
SVG not filling out like fontawesome icons like it has padding or whitespace
Can anyone tell me why this custom SVG on the right won't fill the height like the icon on the right does? The SVG does not have any space on the top and right when opened in Illustrator.
Current SVG ...
- 24.3k
0
votes
1
answer
47
views
Issue in svg images
I am using svg images as i thought these are hight resolution images and auto adjust according to height of screen as i am using it in mobile device but when i check the app in the tablet it got blur ...
- 758
1
vote
1
answer
909
views
Problem with `react-native-svg` in Expo app
I'm encountering an issue while using the react-native-svg library in my Expo app. The error message I'm seeing is:
View config getter callback for component RNSVGPath must be a function (received ...
- 41
0
votes
0
answers
62
views
Rotation Animation Issue in React Native SVG Pie Chart After Reloading App
I am working on a dynamic pie chart using react-native-svg where the stroke width varies based on the data value. The chart includes two animations: stroke width and rotation. While both animations ...
0
votes
0
answers
56
views
SVG icons got blur on Big Size Like tablet
I am using this icon in the react native and works fine but these got blur on big size screen
export const IconToShow = props => {
let { width = 14, height = 14 } = props;
return (
<Svg
...
- 758
0
votes
1
answer
367
views
SVGR has dropped some elements not supported by react-native-svg: filter
how to use my svg file in react native, i tried converting svg to react native and there is a warning: "/* SVGR has dropped some elements not supported by react-native-svg: filter */" and it ...
0
votes
0
answers
89
views
Cannot build EAS Project, Invalid regular expression: Range out of order in character class
I encountered an error while building my Expo application with EAS. I used the following command:
eas build -p android --profile preview
The error message is as follows:
Loaded "env" ...
- 1
0
votes
1
answer
139
views
How to center an SVG within another SVG group
My goal is to center the golden icons inside the black rim.
Below is my code that loops over the arcs created using d3 and the Icon component nested in the SVG group is what I am trying to position ...
- 37
4
votes
0
answers
500
views
Uncaught TypeError: (0 , _reactNative.requireNativeComponent) is not a function
My website used react-native-web and I am getting the following error when I am importing Alert or WarningOutlineIcon from native base
Error
Uncaught TypeError: (0 , _reactNative....
3
votes
1
answer
1k
views
Invariant Violation: requireNativeComponent: "RNSVGSvgView" was not found in the UIManager
I am on a React Native project, I tried to use chart related dependencies in my project, and I have tried @rainbow-me/animated-charts and react-native-wagmi-charts, and all of them leads to the same ...
- 476
1
vote
0
answers
654
views
React Native segmented circular progress bar
I am trying to create a Segmented Circular progress bar (where each segment can have its own size) by using the 'react-native-svg'
here is my code:
const SMCircle = ({ segments }) => {
const ...
- 510
1
vote
2
answers
456
views
How to optimize custom svg component in react or react native to only import / load used svg
I am creating a custom category component that will load all of my SVGs listed in an object.
import { type SvgProps } from 'react-native-svg';
import FoodAndDrink from './icon-svgs/food-and-drink.svg'...
1
vote
0
answers
53
views
How to search the JSX file in react native
I have a svgComponent JSX file in react native. in that I have almost 200 path components. i want to plot some circle on this world map based on data getting from API.
how to search the path component ...
- 600
1
vote
1
answer
243
views
Masking Image With Hollow Circle Shape & Blur
I'm trying to create the below crude example using react-native-svg.
The background image is dynamic and requires a hollow circular mask. This also needs to blur that section of the background image. ...
- 1,089
0
votes
1
answer
928
views
Custom fonts are not rendered in RN-SVG <Text/>
In my code I tried to:
import { useFonts } from 'expo-font'
useFonts( {
'Robo Numbers':require( '../assets/fonts/my-custom.ttf' ),
} )
Now when I render the RN own or RN-Paper's Text element, the ...
- 20.7k
1
vote
0
answers
160
views
Interpolating color of a custom Animated component in react native
I created a custom animated component in react native like this:
const AnimatedPath = Animated.createAnimatedComponent(Path);
where Animated is imported from react-native and Path is imported from ...
- 4,977
0
votes
1
answer
247
views
How to calculate viewbox for an individual path in a svg in react native
I am trying to make every path of svg as independent svg.
I wasn't able to find any method to directy get the viewbox for a path.
take this svg as example:
import Svg, { Path } from 'react-native-svg';...
0
votes
0
answers
116
views
How to highlight nested elements inside SVG and change their color or highlight them in react native
We have a map of a mall which is an image(SVG, or PNG), I'm asked to do the following:
there is an input above the Map where user can look for a store by name, when a store is chosen it should be ...
- 477
5
votes
0
answers
203
views
React-Native-SVG: Masked elements pixelated in android emulator
In my app I have this code:
<Svg width={W} height={H} viewBox={viewBox} style={style} preserveAspectRatio="none">
<Defs>
<Mask id="mask" x={0} y={0}...
- 20.7k
1
vote
1
answer
404
views
How can I make a circular graph with SVG in React Native?
I'm trying to draw a circular graph with SVG in React Native. I want to add a stroke to the chart. How can I do it?
I did this.
This is what I want to do.
Code:
return (
<View style={{ ...
- 110
0
votes
1
answer
2k
views
Bar graph is not centering when using the bar graph from react-native-chart-kit module
I am trying to align this react-native-chart-kit bar graph to the center.
Bar Chart
This is code that I have currently:
<BarChart
data={{
labels: ["SU", "...
1
vote
0
answers
19
views
Scaling a G-Group in RN-SVG
In my app I procedurally create an SVG with this code:
const AnimatedG = Animated.createAnimatedComponent( G )
const transform = 'translate(63.359 83.424)'
const scale = [ 1, 1.04 ] // [ 1, 1 ]
...
- 20.7k
2
votes
0
answers
55
views
Traverse and enrich downloaded XML in React-Native-SVG
In my app I have the following:
axios.get( '/game' ).then( ({ data }) => this.setState( { game:data } ) )
...
render() {
const { game } = this.state
return <View>
{game &&...
- 20.7k
0
votes
1
answer
741
views
Accessing text elements in external SVG files with javascript
If I create the SVG within HTML and give the text items I want to change IDs, I have no problem accessing the ID using
let callQSO = document.getElementById("QSOcall").value;
and then ...
- 1
1
vote
0
answers
571
views
java.lang.Double cannot be cast to abi48_0_0.com.facebook.react.bridge.ReadableMap Error when using svgs on Android
Waddup salty members of stackoverflow.
I have a react-native app with expo and have been developing on IOS for some time. When I finnaly got around to getting an android phone to test on for android. ...
0
votes
1
answer
280
views
How can i resolve error with fill property after upgrading react-native-svg from 12.3.0 to 13.4.0?
I built React Native app, and I'm using Expo SDK 48 (requires [email protected]), after I upgrade react-native-svg package to the latest version, although I use the fill property correctly, I ...
- 33
0
votes
0
answers
178
views
Why is my SVG coordinate system supporting negative coordinates?
I am trying to draw a rectangle in React-Native using the react-native-svg package as follows:
<View
style={{
width: '100%',
height: 200,
borderWidth: 1,
}}
>
<Svg height='...
- 2,133