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')}
/>
Related
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.
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.
How would I use flex to center an svg within a View in react native?
Here is an expo snack that centers an svg by its origin parameters.
Do I need to hardcode origin parameters, place the svg in a View with a flex property, and then export it as a component?
Does svg care about flex?
A related but distinct SO question:
How to center an SVG in React Native?
-> From this answer, should I convert my shape-based svg into a path xml tag? That doesn't seem like the right answer here.
I would rather define svgs inline than import svg files.
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 am new to react native and starting to learn UI design.
I am trying to create wavy background (as in the bottom portion of first card or pink section of the third card) shown in the below image. I searched in multiple react native packages, but haven't found something that implements this.
My question is that
if this type of background design is possible to implement by using some react native packages or the background image has to be designed like
this in some image editing application (like adobe photoshop)?
if this is possible by some react native packages, then any library recommendation or working code will be helpful for me.
Thanks in advance.
Image Source: Google
You could use this package and draw your wavy background with SVG, or set uri of your SVG.
Following code is sample wavy background in React Native
import SvgUri from 'react-native-svg-uri';
export const WavyBackground = () => (
<View>
<SvgUri
width="200"
height="200"
source={{uri:'custom wavy svg url here'}}
/>
</View>
);