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

React Native
1

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;