Working with Image Picker (expo-image-picker)

1. Requesting Permissions

Permission	Required Scope	Description
imagePicker	`mediaLibrary`	Allows access to the device's image library for picking images.
camera	`camera`	Grants permission to access the device's camera for capturing new images.

Example: Requesting Permissions

import * as ImagePicker from 'expo-image-picker';

const requestPermissions = async () => {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('Permission to access media library is required!');
  }
};

requestPermissions();

2. Launching Camera

Property	Description	Values
cameraType	Specifies which camera to use	`'back'`, `'front'`
allowsEditing	Enables editing after capturing image	`true`, `false`
quality	Controls compression quality of captured image	`0.0` to `1.0`

Example: Launch Camera with Back Camera

import * as ImagePicker from 'expo-image-picker';

const launchCamera = async () => {
  const result = await ImagePicker.launchCameraAsync({
    cameraType: 'back',
    allowsEditing: true,
    quality: 0.8
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

3. Launching Image Library

Property	Description	Values
mediaTypes	Specifies the types of media to display in the library	`ImageLibrary`, `VideoLibrary`, `AllMedia`
allowsEditing	Enables or disables editing mode after selection	`true`, `false`
aspect	Defines the aspect ratio for editing mode	`[1, 1]`, `[4, 3]`, `[16, 9]`
quality	Controls the quality of selected images (0-1)	`0.0` to `1.0`

Example: Launching Image Library

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 0.8,
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

4. Setting Media Types

Property	Values	Description
mediaTypes	`'all'`, `'images'`, `'videos'`	Specifies the types of media to allow in the picker. Defaults to `'all'`.

Example: Configure media types

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

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

5. Allowing Image Editing

Property	Description	Values
allowsEditing	Enables or disables the image editor	`true` or `false`

Example: Enabling Image Editing

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

Note: On iOS, the image editor is provided by the system and allows cropping and rotating. On Android, only cropping is supported.

6. Setting Aspect Ratio

Property	Values	Description
aspectRatio	`1:1`, `4:3`, `16:9`, `custom`	Defines the aspect ratio for the image picker. Defaults to `1:1`.

Example: Setting Aspect Ratio to 16:9

import * as ImagePicker from &#x27;expo-image-picker&#x27;;

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    aspectRatio: [16, 9],
    allowsEditing: true,
    quality: 1,
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

7. Setting Image Quality

Property	Description	Values	Notes
quality	Controls the quality of the image when compressed	`0.0` to `1.0`	Higher values mean better quality but larger file size

Example: Setting Image Quality

import * as ImagePicker from &#x27;expo-image-picker&#x27;;

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    quality: 0.8,
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

8. Allowing Multiple Selection

Property	Description	Values
allowsMultipleSelection	Enables selecting multiple images at once	`true` or `false`
selectionLimit	Maximum number of images that can be selected (when `allowsMultipleSelection` is true)	`1` to `∞`

Example: Configure Multiple Selection

import * as ImagePicker from 'expo-image-picker';

const pickMultipleImages = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    allowsMultipleSelection: true,
    selectionLimit: 5,
  });

  if (!result.canceled) {
    console.log('Selected images:', result.assets);
  }
};

Note: On some platforms, the selection limit may be ignored or overridden by system constraints.

9. Handling Picker Result

Property	Description	Values
assets	Array of selected image assets	`Asset[]`
cancelled	Indicates if the picker was cancelled	`true` or `false`

Example: Handling Picker Result

import * as ImagePicker from &#x27;expo-image-picker&#x27;;

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.cancelled) {
    console.log(result.assets[0].uri);
  }
};

Note: The assets array can contain multiple images if the user selects more than one.

10. Accessing Selected Assets

Property	Description	Values
assets	Array of selected assets	Array of `Asset` objects
cancelled	Indicates if the operation was cancelled	`true` or `false`

Example: Accessing Selected Assets

import * as ImagePicker from &#x27;expo-image-picker&#x27;;

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.cancelled) {
    console.log(result.assets[0].uri);
  }
};

Note: The assets array contains one or more selected assets. Each asset includes metadata like uri, type, and size.

11. Getting EXIF Data

Property	Description	Values
exif	EXIF data from the image	`null` or object with EXIF keys

Example: Accessing EXIF Data

import * as ImagePicker from &#x27;expo-image-picker&#x27;;

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
    exif: true
  });

  if (!result.canceled) {
    console.log("EXIF Data:", result.assets[0].exif);
  }
};

Note: EXIF data is only available on iOS and Android devices. On web, it will be null.

12. Using Video Selection

Property	Description	Values
mediaTypes	Specifies the types of media to select	`ImageLibrary`, `VideoLibrary`, `Camera`
allowsEditing	Enables editing of selected media	`true`, `false`
aspect	Aspect ratio for the selected media (only applies to camera)	`[1, 1]`, `[4, 3]`, `[16, 9]`
quality	Quality of the selected video (0.0 to 1.0)	`0.0` to `1.0`

Example: Selecting a Video

import * as ImagePicker from 'expo-image-picker';

const pickVideo = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Videos,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 0.5,
  });

  if (!result.cancelled) {
    console.log(result.uri);
  }
};

Note: On iOS, videos selected from the library will be converted to MP4 format if necessary.