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

Answer 1

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