I'm new w/ React Native and ask you for the help. I'm building an app for iOS which can use camera and photo library. Everything is good, except limited accessPrivilege. When first time user tries to access library there are 3 options : Select Photos, Allow Access to All Photos and Don't Allow. The issue with the first option which is called 'limited'. When first time I select images from the gallery and click to use them, library just closes and after next time opening I still see all the photos, not limited that I have selected. Here's my code below
import React from "react";
import * as ImagePicker from "expo-image-picker";
import {
View,
TextInput,
Text,
Keyboard,
Image,
TouchableWithoutFeedback
} from "react-native";
import CameraModal from "./CameraModal";
import Button from "../shared/Button";
const UserName = () => {
const [uploadPage, setUploadPage] = React.useState(false);
const [isVisible, setIsVisible] = React.useState(false);
const [pickerResponse, setPickerResponse] = React.useState(null);
const [image, setImage] = React.useState(null);
const openCameraModal = () => setIsVisible(true);
const closeCameraModal = () => setIsVisible(false);
const showImagePicker = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("You've refused to allow this app");
return;
}
const result = await ImagePicker.launchImageLibraryAsync(
{
includeBase64: false,
allowsEditing: true,
aspect: [4, 3],
quality: 0.5,
}
);
if (!result.cancelled) {
setImage(result.uri);
}
}
const openCamera = async () => {
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
if (permissionResult.granted === false) {
alert("You've refused to allow this app to access your cam.");
return;
}
const result = await ImagePicker.launchCameraAsync();
if (!result.cancelled) {
setImage(result.uri);
}
}
const uri = image;
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View>
<View>
<Image
style={styles.avatarImage}
source={uri ? { uri } : require("../assets/images/avatar.png")}
/>
<Image
source={require("../assets/images/add-button.png")}
/>
</View>
<Text>Upload Image</Text>
{isVisible && (
<CameraModal
isVisible={isVisible}
closeCameraModal={closeCameraModal}
onImageLibraryPress={showImagePicker}
onCameraPress={openCamera}
/>
)}
</View>
</TouchableWithoutFeedback>
);
};
export default UserName;
CameraModal file
import React from "react";
import {
SafeAreaView,
Text,
Pressable,
StyleSheet,
Dimensions,
} from "react-native";
import Modal from "react-native-modal";
const ImagePickerModal = ({
isVisible,
closeCameraModal,
onImageLibraryPress,
onCameraPress,
}) => {
return (
<Modal
isVisible={isVisible}
onBackButtonPress={closeCameraModal}
onBackdropPress={closeCameraModal}
style={styles.modal}
>
<SafeAreaView style={styles.buttons}>
<Pressable style={styles.button} onPress={onImageLibraryPress}>
<Text>Library</Text>
</Pressable>
<Pressable onPress={onCameraPress}>
<Text>Camera</Text>
</Pressable>
<Pressable onPress={closeCameraModal}>
<Text>Cancel</Text>
</Pressable>
</SafeAreaView>
</Modal>
);
};
export default ImagePickerModal;
I expect to see library with only selected photos