# I am not getting display after selecting images from image input list

**URL:** <https://forum.codewithmosh.com/t/i-am-not-getting-display-after-selecting-images-from-image-input-list/16518>\
**Category:** React Native\
**Created:** [November 17, 2022, 3:02pm UTC](https://forum.codewithmosh.com/t/i-am-not-getting-display-after-selecting-images-from-image-input-list/16518 "2022-11-17T15:02:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![touqeer](https://avatars.discourse-cdn.com/v4/letter/t/b5ac83/32.png) [@touqeer](https://forum.codewithmosh.com/u/touqeer)\
**Post date:** [November 17, 2022, 3:02pm UTC](https://forum.codewithmosh.com/t/i-am-not-getting-display-after-selecting-images-from-image-input-list/16518/1 "2022-11-17T15:02:25Z")

</div>

ImageInput.js =\>

import React, { useEffect } from “react”;  
import {  
View,  
StyleSheet,  
TouchableWithoutFeedback,  
Alert,  
Image,  
} from “react-native”;  
import { MaterialCommunityIcons } from “@expo/vector-icons”;  
import \* as ImagePicker from “expo-image-picker”;

function ImageInput({ imageUri, onChangeImage }) {  
useEffect(() =\> {  
requestPermission();  
}, );

const requestPermission = async () =\> {  
const { granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();

```
if (!granted) alert("Allow this app to access your image library");

```

};  
const handlePress = () =\> {  
if (!imageUri) SelectImage();  
else  
Alert.alert(“Delete”, "Are you sure you want to delete ", [  
{ text: “Yes”, onPress: () =\> onChangeImage(null) },  
{ text: “No” },  
]);  
};

const SelectImage = async () =\> {  
try {  
const imgResult = await ImagePicker.launchImageLibraryAsync({  
mediaTypes: ImagePicker.MediaTypeOptions.Images,  
quality: 0.5,  
});  
if (!imgResult.cancelled) onChangeImage(imgResult.uri);  
} catch (error) {  
console.log("Error reading an image ", error);  
}  
};

return (  
  
  
{!imageUri && (  
  
)}  
{imageUri && \<Image source={{ uri: imageUri }} style={styles.img} /\>}  
  
  
);  
}

const styles = StyleSheet.create({  
Container: {  
backgroundColor: “#f1f1f1”,

```
borderRadius: 15,

marginTop: 40,

alignItems: "center",

justifyContent: "center",

overflow: "hidden",

width: 100,

height: 100,

```

},  
img: {  
width: “100%”,  
height: “100%”,  
},  
});  
export default ImageInput;

ImageInputList.js =\>

import React from “react”;  
import { View, StyleSheet } from “react-native”;  
import ImageInput from “./ImageInput”;  
import Screen from “./Screen”;

function ImageInputList({ imagesUris = , onRemoveImage, onAddImage }) {  
return (  
//   
  
{imagesUris.map((uri) =\> (  
\<View key={uri} style={{ marginRight: 10 }}\>  
\<ImageInput  
imageUri={uri}  
// key={uri}  
onChangeImage={() =\> onRemoveImage(uri)}  
/\>  
  
))}

```
  <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
</View>
// </Screen>

```

);  
}

const styles = StyleSheet.create({  
container: {  
flexDirection: “row”,  
},  
});

export default ImageInputList;

MultipleImageSelect.js =\>

import React, { useState } from “react”;  
import { View, StyleSheet } from “react-native”;  
import ImageInputList from “./ImageInputList”;  
import Screen from “./Screen”;

function MultipleImagesSelect(props) {  
let [imageUris, setImageUris] = useState();

const handleAdd = (uri) =\> {  
setImageUris([…imageUris, uri]);  
};

const handleRemove = (uri) =\> {  
setImageUris(imageUris.filter((imageUri) =\> imageUri !== uri));  
};  
return (  
  
  
  
  
  
);  
}

const styles = StyleSheet.create({  
container: {},  
});

export default MultipleImagesSelect;