React-Native not displaying background Image

Question

I'm trying to set a background Image in React-Native but it is not appearing on my screen. However, the text inside <ImageBackground></ImageBackground> is getting displayed. Here's my code:

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

type Props = {};
export default class App extends Component {
  render() {
    return (
    <ImageBackground style={styles.container} source={require("./Assets/bg.png")}>
        <Text>Inside</Text>
    </ImageBackground>
    );
  }
}

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

Here is my directory structure below. You can see there bg.png exists.

And Here is the output that I'm getting.

Here is my bg.png

I can't find what's wrong with this. Everything seems ok, Also I'm not getting any error message. Please Help

@PritishVaidya Please see my edited answer, I just added the image that I'm trying to set as background — Zainul Abideen, Apr 17 '18 at 19:13
The app was crashing due to large canvas image rendering in android so i resized it to 25% and it worked. — Pritish Vaidya, Apr 17 '18 at 19:36
But In my case, App was not crashing nor I was getting any error. Only the image was not appearing. that's it — Zainul Abideen, Apr 18 '18 at 04:55
Checkout this [link](https://snack.expo.io/Bkoie8V3G) both for android and ios — Pritish Vaidya, Apr 18 '18 at 04:59
You're right. It worked. This tiny problem wasted my 6-7 hours. Thanks a lot. Post it as your answer so that I can accept it and others can also take the benefit. — Zainul Abideen, Apr 18 '18 at 05:32

score 2 · Accepted Answer · answered Apr 18 '18 at 06:36

2

Here's the link to the expo.

It appears that there happens a crash in android for large images the bitmap becomes out of memory.

Therefore a workaround for that is to resize the image and use it.

For more info checkout this link

answered Apr 18 '18 at 06:36

Pritish Vaidya

21,561
3
58
76

React-Native not displaying background Image

1 Answers1