managarten/nutriphi/ReadMes/Expo-ImagePicker.md

Expo ImagePicker

A library that provides access to the system's UI for selecting images and videos from the phone's library or taking a photo with the camera.

Bundled version: ~16.1.4 expo-image-picker provides access to the system's UI for selecting images and videos from the phone's library or taking a photo with the camera.

Installation Terminal

Copy

npx expo install expo-image-picker If you are installing this in an existing React Native app, make sure to install expo in your project.

Known issues  On iOS, when an image (usually of a higher resolution) is picked from the camera roll, the result of the cropped image gives the wrong value for the cropped rectangle in some cases. Unfortunately, this issue is with the underlying UIImagePickerController due to a bug in the closed-source tools built into iOS.

Configuration in app config You can configure expo-image-picker using its built-in config plugin if you use config plugins in your project (EAS Build or npx expo run:[android|ios]). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.

Example app.json with config plugin app.json

Copy

{ "expo": { "plugins": [ [ "expo-image-picker", { "photosPermission": "The app accesses your photos to let you share them with your friends." } ] ] } } Configurable properties Name Default Description photosPermission "Allow $(PRODUCT_NAME) to access your photos" Only for: 

A string to set the NSPhotoLibraryUsageDescription permission message.

cameraPermission "Allow $(PRODUCT_NAME) to access your camera" Only for: 

A string to set the NSCameraUsageDescription permission message.

microphonePermission "Allow $(PRODUCT_NAME) to access your microphone" Only for: 

A string to set the NSMicrophoneUsageDescription permission message.

Are you using this library in an existing React Native app? Usage Image Picker

Copy

Open in Snack

import { useState } from 'react'; import { Button, Image, View, StyleSheet } from 'react-native'; import * as ImagePicker from 'expo-image-picker';

export default function ImagePickerExample() { const [image, setImage] = useState<string | null>(null);

const pickImage = async () => { // No permissions request is necessary for launching the image library let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images', 'videos'], allowsEditing: true, aspect: [4, 3], quality: 1, });

console.log(result);

if (!result.canceled) {
  setImage(result.assets[0].uri);
}

};

return ( {image && <Image source={{ uri: image }} style={styles.image} />} ); }

const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, image: { width: 200, height: 200, }, });

Show More When you run this example and pick an image, you will see the image that you picked show up in your app, and a similar log will be shown in the console:

{ "assets": [ { "assetId": "C166F9F5-B5FE-4501-9531", "base64": null, "duration": null, "exif": null, "fileName": "IMG.HEIC", "fileSize": 6018901, "height": 3025, "type": "image", "uri": "file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg" "width": 3024 } ], "canceled": false } With AWS S3 AWS storage example An example of how to use AWS storage can be found in with-aws-storage-upload.

See Amplify documentation guide to set up your project correctly.

With Firebase Firebase storage example An example of how to use Firebase storage can be found in with-firebase-storage-upload.

See Using Firebase guide to set up your project correctly.

API import * as ImagePicker from 'expo-image-picker'; Hooks useCameraPermissions(options) Parameter Type options (optional) PermissionHookOptions