ImagePicker

expo-image-picker proporciona acceso a la interfaz de usuario del sistema para seleccionar imágenes y videos
de la biblioteca del teléfono o tomar una foto con la cámara.

Compatibilidad de plataforma

Android Device Android Emulator iOS Device iOS Simulator Web

X X X X X

Instalación
expo install expo-image-picker

Ejemplo de uso
import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

export default class ImagePickerExample extends React.Component {

state = {
image: null,
};

render() {
let { image } = this.state;

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Pick an image from camera roll" onPress={this._pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 200, height:
200 }} />}
</View>
);
}

componentDidMount() {
this.getPermissionAsync();
}

getPermissionAsync = async () => {

if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
};

_pickImage = async () => {

try {
let result = await ImagePicker.launchImageLibraryAsync({
 mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
this.setState({ image: result.uri });
}

console.log(result);
} catch (E) {
console.log(E);
}
};
}

Cuando ejecute este ejemplo y elija una imagen, verá que la imagen que eligió se muestra en su aplicación, y
algo similar a lo siguiente se registra en su consola:

{
"cancelled":false,
"height":1611,
"width":2148,
"uri":"file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
}

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

ImagePicker.requestCameraPermissionsAsync()
Pide al usuario que otorgue permisos para acceder a la cámara. Alias para

Permissions.askAsync(Permissions.CAMERA).

Returns

Una promesa que resuelve un objeto de tipo PermissionResponse.

ImagePicker.requestCameraRollPermissionsAsync()
Pide al usuario que otorgue permisos para acceder a la foto del usuario. Alias para

Permissions.askAsync(Permissions.CAMERA_ROLL).

Returns

Una promesa que resuelve un objeto de tipo PermissionResponse.

ImagePicker.getCameraPermissionsAsync()
Comprueba los permisos del usuario para acceder a la cámara. Alias para

Permissions.getAsync(Permissions.CAMERA).

Returns

Una promesa que resuelve un objeto de tipo PermissionResponse.

ImagePicker.getCameraRollPermissionsAsync()
Comprueba los permisos del usuario para acceder a las fotos. Alias para

Permissions.getAsync(Permissions.CAMERA_ROLL).

Returns

Una promesa que resuelve un objeto de tipo PermissionResponse.

ImagePicker.launchImageLibraryAsync(options)
Muestra la IU del sistema para elegir una imagen o un video de la biblioteca del teléfono. Requiere
Permissions.CAMERA_ROLL solo en iOS 10.

Argumentos

options (object) --

- Un mapa de opciones para ambos:

 mediaTypes (ImagePicker.MediaTypeOptions) -- Elija qué tipo de medios elegir. El valor

predeterminado es ImagePicker.MediaTypeOptions.Images.
 allowsEditing (boolean) -- Si se debe mostrar una IU para editar la imagen / video después de que se
selecciona. Imágenes: en Android, el usuario puede recortar y rotar la imagen y en iOS simplemente recortarla.
Videos: en iOS, el usuario puede recortar el video. Por defecto es falso.
 AllowsMultipl eSelection (boolean) -- (Solo web) Si se permite o no seleccionar múltiples archivos
multimedia a la vez.

- Un mapa de opciones para imágenes:

 aspect (array) -- Una matriz con dos entradas [x, y] que especifica la relación de aspecto que se debe
mantener si el usuario puede editar la imagen (al pasar allowEditing: true). Esto solo es aplicable en Android,
ya que en iOS el rectángulo de recorte siempre es un cuadrado.
 quality (number) -- Especifique la calidad de la compresión, de 0 a 1. 0 significa comprimir para un
tamaño pequeño, 1 significa comprimir para obtener la máxima calidad.
Nota: Si la imagen seleccionada se ha comprimido antes, el tamaño del archivo de salida puede ser mayor que el
tamaño de la imagen original.
 base64 (boolean) -- Si también se incluyen los datos de la imagen en formato Base64.
 exif (boolean) -- Si incluir también los datos EXIF para la imagen.

- Opción para videos:

 videoExportPreset (ImagePicker.VideoExportPreset) -- Disponible solo en iOS 11+.
Especifique el preajuste que se usará para comprimir el video seleccionado. El valor predeterminado es
ImagePicker.VideoExportPreset.Passthrough.

Compatibilidad con GIF animados Si la imagen seleccionada es un GIF animado, la imagen resultante también
será un GIF animado si y solo si la calidad se configura como indefinida y permite que la Edición se configure
como falsa. De lo contrario, la compresión y / o el recortador elegirán el primer fotograma del GIF y lo
devolverán como resultado (en Android, el resultado será un PNG, en iOS - GIF).

Devoluciones

Si el usuario canceló el picking, regresa { cancelled: true }.

De lo contrario, este método devuelve información sobre el elemento multimedia seleccionado. Cuando el
elemento elegido es una imagen, este método devuelve { cancelled: false, type: 'image', uri, width, height,
exif, base64 }; cuando el elemento es un video, este método devuelve { cancelled: false, type: 'video', uri,
width, height, duration }.

 La propiedad uri es un URI para la imagen local o el archivo de video (utilizable como la fuente de un
elemento Image, en el caso de una imagen) y el ancho y la altura especifican las dimensiones de los medios.
 El campo exif se incluye si la opción exif es verdadera y es un objeto que contiene los datos EXIF de la
imagen. Los nombres de las propiedades de este objeto son etiquetas EXIF y los valores son los respectivos
valores EXIF para esas etiquetas.
 La propiedad base64 se incluye si la opción base64 es verdadera y es una cadena Base64-encoded de los
datos JPEG de la imagen seleccionada. Si antepones esto con 'data:image/jpeg;base64,' para crear un dato URI,
puede usarlo como fuente de un elemento de Image; por ejemplo: <Image source={'data:image/jpeg;base64,'
+ launchCameraResult.base64} style={{width: 200, height: 200}} />.
 La propiedad de duration es la duración del video en milisegundos.

ImagePicker.launchCameraAsync(options)
Muestra la interfaz de usuario del sistema para tomar una foto con la cámara. Requiere Permissions.CAMERA.
En los permisos de Android e iOS 10, también se requiere CAMERA_ROLL.

Argumentos

options (object) --

- Un mapa de opciones:

 mediaTypes (ImagePicker.MediaTypeOptions) -- Elija qué tipo de medios elegir. El valor

predeterminado es ImagePicker.MediaTypeOptions.Images.

 allowsEditing (boolean) -- Si se debe mostrar una IU para editar la imagen después de que se
selecciona. En Android, el usuario puede recortar y rotar la imagen y en iOS simplemente recortarla.
Por defecto es falso.

- Un mapa de opciones para imágenes:

 aspect (array) -- Una matriz con dos entradas [x, y] que especifica la relación de aspecto que se debe
mantener si el usuario puede editar la imagen (al pasar allowEditing: true). Esto solo es aplicable en Android, ya
que en iOS el rectángulo de recorte siempre es un cuadrado.
 quality (number) -- Especifique la calidad de la compresión, de 0 a 1. 0 significa comprimir para un
tamaño pequeño, 1 significa comprimir para obtener la máxima calidad.
 base64 (boolean) -- Si también se incluyen los datos de la imagen en formato Base64.
 exif (boolean) -- Si incluir también los datos EXIF para la imagen. En iOS, los datos EXIF no incluyen
etiquetas GPS en la carcasa de la cámara.

Opción para videos:

 videoExportPreset (ImagePicker.VideoExportPreset) -- Disponible solo en iOS 11+.

Especifique el preajuste que se usará para comprimir el video seleccionado. El valor predeterminado es
ImagePicker.VideoExportPreset.Passthrough.

Devoluciones

Si el usuario canceló la acción, el método devuelve { cancelled: true }.

De lo contrario, este método devuelve información sobre el elemento multimedia seleccionado. Cuando el
elemento elegido es una imagen, este método devuelve { cancelled: false, type: 'image',
uri, width, height, exif, base64 }; cuando el elemento es un video, este método devuelve
{ cancelled: false, type: 'video', uri, width, height, duration }.

 La propiedad uri es un URI para la imagen local o el archivo de video (utilizable como la fuente de un
elemento de imagen, en el caso de una imagen) y el ancho y la altura especifican las dimensiones de los medios.
 El campo exif se incluye si la opción exif es verdadera y es un objeto que contiene los datos EXIF de la
imagen. Los nombres de las propiedades de este objeto son etiquetas EXIF y los valores son los respectivos
valores EXIF para esas etiquetas.
 La propiedad base64 se incluye si la opción base64 es verdadera y es una cadena Base64-encoded de los
datos JPEG de la imagen seleccionada. Si antepones esto con 'data:image/jpeg;base64,' to cree un URI de
datos, puede usarlo como fuente de un elemento de imagen; por ejemplo: <Image
source={'data:image/jpeg;base64,' + launchCameraResult.base64} style={{width: 200, height: 200}} />.
 La propiedad de duration es la duración del video en milisegundos..

Enums
ImagePicker.MediaTypeOptions

Media type Accept asset types Platforms

MediaTypeOptions.All Images and videos iOS
MediaTypeOptions.Images Only images both
MediaTypeOptions.Videos Only videos both

ImagePicker.VideoExportPreset
 Video Audio
Preset Value Resolution compression compression
algorithm algorithm
VideoExportPreset.Passthrough 0 Unchanged None None
VideoExportPreset.LowQuality Depends on
1 H.264 AAC
the device
VideoExportPreset.MediumQuality Depends on
2 H.264 AAC
the device
VideoExportPreset.HighestQuality 3 Depends on
H.264 AAC
the device
VideoExportPreset.H264_640x480 4 640 x 480 H.264 AAC
VideoExportPreset.H264_960x540 5 960 x 540 H.264 AAC
VideoExportPreset.H264_1280x720 6 1280 x 720 H.264 AAC
VideoExportPreset.H264_1920x1080 7 1920 x 1080 H.264 AAC
VideoExportPreset.H264_3840x2160 8 3840 x 2160 H.264 AAC
VideoExportPreset.HEVC_1920x1080 9 1920 x 1080 HEVC AAC
VideoExportPreset.HEVC_3840x2160 10 3840 x 2160 HEVC AAC