如何在 react-native 中使用 svg 图像作为背景图像？

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?

Answer 1

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

Answer 2

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

Answer 3

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, // image is always behind the content
}}>
      <SVGShape width={50} height={50} />
    </View>
  );
};