React Native - set image as background using ImageBackground-CodePudding

I'm trying to render an Image as background, but is not working, I don't know why. Here is my code.

<ImageBackground
      source={require('../assets/images/logos/AFC.svg')}
      resizeMode="cover"
      style={styles.style}>
 </ImageBackground>

CodePudding user response：

React Native does not directly support using SVG format images. In order to use SVG Images you must use 3rd party libraries. I suggest using react-native-svg. Which is a great library and here is a tutorial you can use to set it up.

Your use case is to set it as a background image. It would be better to use png or jpg formats for use with Image Background component in react native. If you only have svg format of the image, then you can set it in View and control the view

CodePudding user response：

You should use react-native-svg to display SVGs.

CodePudding user response：

if you want a svg in background you can do this example below

import { View, Text, Dimensions } from 'react-native'
import React from 'react'
import AFCIcon from '../assets/images/logos/AFC.svg'

const SCREEN = Dimensions.get("screen");
const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <View style={{
        position: "absolute",
        width: "100%",
        height: "100%",
        bottom: 0,
        zIndex: -1,
      }}>
        <AFCIcon width={SCREEN.width} height={SCREEN.height} />
      </View>

      {/* your code here */}
      
    </View>
  )
}

export default App