How to use svg image as background image in react-native?

Question

I use svg in my react-native app next way:

import TestLogo from "../../assets/TestLogo.svg";
<TestLogo />

I use background image in next way:

import background from '../../assets/modules/auth/signUpPattern.png'
<ImageBackground source={background} style={{width: '100%', height: '100%',  alignItems: 'center'}}>

If I use the next syntax:

    import Background from '../../assets/modules/auth/signUpPattern.svg'
    <ImageBackground source={<Background />} style={{width: '100%', height: '100%',  alignItems: 'center'}}>

I got empty space, not svg image background, how to fix it?

Support of SVG images seems to be a feature of RN 0.61 (didn't test it, but read it here If doesn't work, or you need support in RN < 0.61, you have to use an Component for this like this — suther
– suther, Commented Feb 18, 2020 at 13:17
I use react-native-svg and it works. The problem only how to use it background — befreeforlife
– befreeforlife, Commented Feb 18, 2020 at 13:56
You can't post your Background as Component to the source. At least you can try to use data: as uri-scheme (like described here) but I doubt that this will work. I've read something that svg doesn't work within `data:'. What's about to paste it as Children and use styling to scale-up it as you need. Have a look at sourcecode of <ImageBackround> shows you, how it's implemented — suther
– suther, Commented Feb 18, 2020 at 14:19
Does it work with 'data:', or you added it as Children? Nice that it helps you out. — suther
– suther, Commented Feb 18, 2020 at 15:24

Sharad S Katre · Accepted Answer · 2020-09-03 07:34:38Z

12

import TestLogo from "../../assets/TestLogo.svg";
<TestLogo />

You can use this for adding background Image for the screen. Just need to add the style to the TestLogo component.

Example:

<TestLogo
   style={{
     position: 'absolute',
     top: 0,
     left: 0,
     right: 16,
     bottom: 0,
   }}
 />

answered Sep 3, 2020 at 7:34

Sharad S Katre

4084 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Engin Yilmaz Over a year ago

I don't think you can directly import and use a SVG graphic unless using a library like react-native-svg like @Waleed Azhar says in his reply

Sharad S Katre Over a year ago

Yes, If you are using typescript then you need to use third-party dependencies

Mitar Spasic · Accepted Answer · 2022-09-13 07:32:04Z

2

Put it inside the container, style the parent, and that should do the work.

import { View, StyleSheet } from "react-native";
import SVGShape from "../assets/icons/path";

export default ShapeSVG = () => {
  return (
    <View style={{
      position: "absolute",
      width: "100%",
      height: "32%",
      bottom: 0,
      zIndex: -1, 
}}>
      <SVGShape width={50} height={50} />
    </View>
  );
};

edited Sep 13, 2022 at 7:32

answered Sep 12, 2022 at 13:54

Mitar Spasic

214 bronze badges

Comments

Waleed Azhar · Accepted Answer · 2020-02-18 13:11:41Z

1

react-native doesn't support .svg formats. u can use library like react-native-svg or any other.

answered Feb 18, 2020 at 13:11

Waleed Azhar

721 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to use svg image as background image in react-native?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related