CODEWITHSUNDEEP
reactjsimagereact-nativesvg
befreeforlife
befreeforlife

Reputation: 511

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

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?

Upvotes: 16

Views: 34474

Answers (3)

Mitar Spasic
Mitar Spasic

Reputation: 11

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>
  );
};

Upvotes: 1

Sharad S Katre
Sharad S Katre

Reputation: 398

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,
   }}
 />

Upvotes: 12

Waleed Azhar
Waleed Azhar

Reputation: 72

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

Upvotes: 1

Related Questions