CODEWITHSUNDEEP
androidiosreact-nativecompiler-errorscross-platform
ABAS HERSI
ABAS HERSI

Reputation: 115

Why isn't react native displaying my background image?

The following code below compiles into react native just fine and the I don't recieve any errors in any of the compilers but my android emulator remains blank instead of displaying a background image like it's suppose to. Does anyone know why?

Code:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ImageBackground} from 'react-native';

import bgImage from './Images/background.jpg' 

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View>
      <ImageBackground source={bgImage} style={styles.backgroundContainer}>
      </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    backgroundContainer: {
    flex: 1,
    width:null, 
    height:null, 
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Upvotes: 1

Views: 2545

Answers (3)

Chanaka
Chanaka

Reputation: 778

Try this way

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ImageBackground} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View>
      <ImageBackground source={require(./Images/background.jpg)} style={styles.backgroundContainer}>
          <Text> Here Background Image </Text>
      </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    backgroundContainer: {
    flex: 1,
    width:'100%', 
    height:'100%',
  },
});

Upvotes: 1

oma
oma

Reputation: 1894

source={require(BgIMage)} You missed the require

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You should use require

 <ImageBackground soure={require(bgImage)} style={styles.backgroundContainer}>
      </ImageBackground>

Upvotes: 0

Related Questions