# Image sourced from assets folder is only partially displayed

**URL:** <https://forum.codewithmosh.com/t/image-sourced-from-assets-folder-is-only-partially-displayed/8982>\
**Category:** React Native\
**Created:** [December 4, 2021, 8:13am UTC](https://forum.codewithmosh.com/t/image-sourced-from-assets-folder-is-only-partially-displayed/8982 "2021-12-04T08:13:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![RaviU](https://avatars.discourse-cdn.com/v4/letter/r/e495f1/32.png) [@RaviU](https://forum.codewithmosh.com/u/RaviU)\
**Post date:** [December 4, 2021, 8:13am UTC](https://forum.codewithmosh.com/t/image-sourced-from-assets-folder-is-only-partially-displayed/8982/1 "2021-12-04T08:13:46Z")

</div>

With the code below, the image occupies the full display but is itself only partially displayed. Even reducing flex: 0.001 does not bring the full image into display.  
Please help

import React from “react”;

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

export default function App() {

return (

```
<SafeAreaView style={styles.container}>

  <Image source={require("./assets/background.jpg")} />

</SafeAreaView>

```

);

}

const styles = StyleSheet.create({

container: {

```
flex: 1,

backgroundColor: "#fff",

justifyContent: "center",

alignItems: "center",

```

},

});