CODEWITHSUNDEEP
iosimagereact-nativereact-native-imageimagebackground
Paulo Rodrigues
Paulo Rodrigues

Reputation: 407

react native ImageBackground not showing on IOS device

I am using the ImageBackground component of react native, but in IOS (device) it is not displaying the image, in the simulator the image appears What can this be?

code below:

import { ImageBackground } from 'react-native';

const imgSrc = require('../../assets/images/bg-login.png');

<ImageBackground
        resizeMode="cover"
        source={imgSrc}
        style={style.backgroundImage}
      >

style below:

backgroundImage: {
        width: screenWidth,
        height: '100%'
    },

Upvotes: 0

Views: 1986

Answers (2)

Dupont
Dupont

Reputation: 403

Did you add asset folder to your iOS build ?

Here the commande to do it :

react-native bundle --minify --entry-file index.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios

You will see asset folder and main.jsbundle file in the ios folder. After that go to Xcode -> build phases -> copy bundle resources and then add the asset folder and main.jsbundle file. Don't forget to click on the Copy if needed

Upvotes: 1

Mahesh Dangar
Mahesh Dangar

Reputation: 804

render() {


    return (
    <View style={{ flex: 1 }}>
    <ImageBackground
            resizeMode="cover"
            source={require('../assets/oops.png')}
            style={{width:Dimensions.get('screen').width,height:Dimensions.get('screen').height}}
          >

      </ImageBackground>
      </View>
    );
  }

try this code and use resizeMode as per your requirement

Upvotes: 0

Related Questions