# Render problem for ViewImageScreen

**URL:** <https://forum.codewithmosh.com/t/render-problem-for-viewimagescreen/11925>\
**Category:** React Native\
**Created:** [April 15, 2022, 12:16pm UTC](https://forum.codewithmosh.com/t/render-problem-for-viewimagescreen/11925 "2022-04-15T12:16:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Walentina](https://avatars.discourse-cdn.com/v4/letter/w/a183cd/32.png) [@Walentina](https://forum.codewithmosh.com/u/Walentina)\
**Post date:** [April 15, 2022, 12:16pm UTC](https://forum.codewithmosh.com/t/render-problem-for-viewimagescreen/11925/1 "2022-04-15T12:16:39Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![DavidMacDWeb](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@DavidMacDWeb](https://forum.codewithmosh.com/u/DavidMacDWeb)\
**Post date:** [April 15, 2022, 10:28pm UTC](https://forum.codewithmosh.com/t/render-problem-for-viewimagescreen/11925/2 "2022-04-15T22:28:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Walentina](https://avatars.discourse-cdn.com/v4/letter/w/a183cd/32.png) [@Walentina](https://forum.codewithmosh.com/u/Walentina)\
**Post date:** [April 16, 2022, 9:24am UTC](https://forum.codewithmosh.com/t/render-problem-for-viewimagescreen/11925/3 "2022-04-16T09:24:25Z")

</div>

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.