For some reason my background image is not displaying - reactjs

Question

For some reason none of the questions or online videos online is helping me solve my issue. This is my code below and its still displaying my page without an image. If anyone can help me see whats wrong that would be great.
import { Image, Text } from 'react-native';
import React, { Component } from 'react';
class BackgroundImage {
render() {
return (
<Image source={require('../../images/showcase.jpg')} style=
{styles.backgroundImage}>
{this.props.children}
</Image>
);
}
}
class TestBackgroundImage extends Component {
render() {
return (
<BackgroundImage>
<Text style={styles.text}>Fullscreen!</Text>
</BackgroundImage>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: 50,
height: 50,
resizeMode: 'cover'
},
text: {
textAlign: 'center',
color: 'white',
backgroundColor: 'rgba(0,0,0,0)',
fontSize: 32
}
});
const Home = () => (
<div>
<h2>Home page</h2>
</div>
);
export default Home;

Answer 1

This might be because you are setting width and height null. height and width must have value, otherwise image doesn't shows. Please try to assign value of height and width e.g.
backgroundImage: {
flex: 1,
width: 50,
height: 50,
resizeMode: 'cover'
},

Answer 2

Have you tried to import the Image component in BackGroundImage and BackGroundImage in TestBackgroundImage?
// In BackGroundImage.js
import Image from 'path';
// In TestBackgroundImage.js
import BackGroundImage from 'path';
and I think, you want to show all components in Home component.
so
//import all components in Home.js
const Home = ()=> {
return {
<BackgroundImage/>
<TestBackgroundImage/>
}
}

Answer 3

Instead of using image use ImageBackGround directly
class BackgroundImage {
render() {
return (
<ImageBackground source={require('../../images/showcase.jpg')} style=
{styles.backgroundImage}>
{this.props.children}
</ImageBackground>
);
}
}