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?

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.