CODEWITHSUNDEEP
react-nativeimagebackground
scheebler
scheebler

Reputation: 15

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>

Upvotes: 0

Views: 1391

Answers (3)

Moustaoui Salaheddine
Moustaoui Salaheddine

Reputation: 78

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

Upvotes: 0

Vin Xi
Vin Xi

Reputation: 1307

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

Upvotes: 1

Elio Rahi
Elio Rahi

Reputation: 164

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

Upvotes: 0

Related Questions