I am using react-native-svg for handling SVG but i am noticing a delay when switching to a stack/screen that contains SVG. I am using a tabBar in react-navigation 6 to switch stacks/screens.
When i have SVG in the screen as below i can notice a small delay of around 0,5-1s before the stack/screen shows up. If i remove all SVG it switches just fine with 0s delay.
I have tried with react-native-svg-transformer but the delay just increases.
I have around 10 SVG:s as below in one screen.
import { WithLocalSvg } from 'react-native-svg';
<WithLocalSvg width="28" height="28" style={{position:'absolute', top:16, left:0, transform: [{ rotate: '12deg' }]}} asset={require("../../images/svg_source.svg")} />
Any tips or ideas are welcome. Maybe there is another way to work with SVG in react-native?
Another approach is to use a library called react-native-fast-image,
which is a performant image-loading library for react-native. It loads
images as quickly as possible, and also supports SVG files.
and the delay you're experiencing when switching to a screen
containing SVG is likely due to the fact that the SVG images are being
loaded asynchronously, which can cause a delay in the rendering of the
screen.
Related
Is it possible to pulsating a SVG in a Component? And how can i do this?
I found some packages but pulsating a circle, i want to pulsating a bag (SVG)
Yes, it's possible. react-native-svg allows you to import SVGs (with some setup), or you can use its primitives to convert an SVG to RN components. Then to animate it, use React Native's Animated API. The fade in/out example on the API page can be easily adapted to make a pulsing animation.
In normal css, dimensions like px, %, rem etc. works perfectly. But in react native, it throws an error.
Are there any possible ways to use these dimensions directly in react-native ?
REMs are a way of setting font-sizes based on the font-size of the root HTML element.
react native is purely works on pixels. Different mobile screens have different pixel ratio .
pixelRatio documentation in react native
if you want text normalization in react native
use my custom function in my open source project.
Suppose you want the width to be 50% of the View so you can do <View style={{width:'50%'}} /> .
Hope its clear. Feel free for doubts.
I use react-native-svg to insert SVG images into my React Native app.
I'm currently replacing my pngs by svgs because of the blurriness of most of my assets. I came to a use case where I need to replace an ImageBackground, that uses png by an SVG file. Is there a way to do this? I tried to use the image as a main component with all my elements inside but the image appears on top of everything.
You can use react-native-svg-uri
Example
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
source={require('./simpson.svg')}
/>
i'm facing a problem in react native
Want to real image is clickable but should not click the alpha background. Please suggest me how can i do this.
In below image i used zIndex to placing the birds ,red color indicate the alpha area of above birdenter image description here
Unfortunately, there's no easy way to do this with React Native. The best solution I've found is by defining SVGs and using react-native-svg, which supports touch events. If you're using Expo, then it is already preinstalled and can be imported like import { Svg } from 'expo'; const { Circle, Rect } = Svg;.
Alternatively, you may be able to use a WebView (mirror) and CSS masking to achieve your desired result.
If i make my application screen on nexus4 emulator screen and wanted to see it on small screen phones, would it be necessary to use scrollview instead of View in react-native.
In some cases yes, because scaling everything according to the screen size will make the app elements look extremely tiny on some devices and text will be hard to read. I had a similar issue where I scaled every screen according to the device resolution and customers complained about not being able to read on small devices.
What I did was wrap such screens in a ScrollView, then put a View inside it with a minHeight: screenHeight then put elements with flexbox and fixed size inside it. This way it would fit most screens perfectly and on smaller ones it would still look good enough. You should experiment a little to see what works best for your app.