1

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
Svn
  • 11
  • 2
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Nov 08 '22 at 13:07

0 Answers0