Render problem for ViewImageScreen

React Native
1

Hi,

I have a problem with my ViewImageScreen component.
I follow Mosh in every step. My code is identical to his but on my phones it doesn’t show the image.
It only shows the closeIcon and deleteIcon.
If I change the setting of the image style then is possible to see the photo but not the icons.
I didn’t have any problems with the WelcomeScreen component.
The fact is - it doesn’t say there is a problem. It’s just not showing the background photo

This is the code:
import React from “react”;

import { Image, StyleSheet, View } from “react-native”;

import colors from “…/config/colors”;

function ViewImageScreen(props) {

return (

<View style={styles.container}>

  <View style={styles.closeIcon}></View>

  <View style={styles.deleteIcon}></View>

  <Image

    resizeMode="contain"

    style={styles.image}

    source={require("../assets/chair.jpg")}

  />

</View>

);

}

const styles = StyleSheet.create({

closeIcon: {

width: 50,

height: 50,

backgroundColor: colors.primary,

position: "absolute",

top: 40,

left: 30,

},

container: {

backgroundColor: colors.black,

flex: 1,

},

deleteIcon: {

width: 50,

height: 50,

backgroundColor: colors.secondary,

position: "absolute",

top: 40,

right: 30,

},

image: {

width: "100%",

height: "100%",

},

});

export default ViewImageScreen;

2

If you can see the image after editing the style it sounds like a style issue.
My code doesn’t have width and height in my close icon:
const styles = StyleSheet.create({

closeIcon: {

 position: "absolute",

 top: 40,

 left: 30,

},

That’s all I have in mine. Hope this helps.

3

Hi David,

Thanks for your reply.
Unfortunately, I’ve tried but it doesn’t work. But I definitely agree with you that is a style issue; I’ll try something else until it works, hopefully.