CODEWITHSUNDEEP
react-nativebackground-imageimagebackground
Zainul Abideen
Zainul Abideen

Reputation: 1900

React-Native not displaying background Image

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. enter image description here

And Here is the output that I'm getting. enter image description here

Here is my bg.png enter image description here

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

Upvotes: 0

Views: 9145

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

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

Upvotes: 2

Related Questions