Question 34183 in React native Question posted in
The official React Native documentation can be found here.

React Native – set image as background using ImageBackground

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>
Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search