expo-image-picker - Sélection d'images

Permets aux utilisateurs de choisir des images dans leur galerie ou de prendre des photos !

Installation

npx expo install expo-image-picker

Configuration des permissions (app.json)

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "L'application requiert l'accès aux photos",
          "cameraPermission": "L'application requiert l'accès à la caméra"
        }
      ]
    ]
  }
}

Sélection depuis la galerie

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

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

  const pickImage = async () => {
    // Vérifier les permissions
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (status !== 'granted') {
      Alert.alert('Erreur', 'Aucune permission pour la galerie');
      return;
    }

    // Ouvrir le sélecteur
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.8,
    });

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

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={pickImage}>
        <Text>Choisir une photo</Text>
      </Pressable>

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

Prendre une photo

const takePhoto = async () => {
  const { status } = await ImagePicker.requestCameraPermissionsAsync();

  if (status !== 'granted') {
    Alert.alert('Erreur', 'Aucune permission pour la caméra');
    return;
  }

  const result = await ImagePicker.launchCameraAsync({
    allowsEditing: true,
    aspect: [1, 1],
    quality: 0.9,
  });

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

Options d'ImagePicker

const result = await ImagePicker.launchImageLibraryAsync({
  // Types de médias
  mediaTypes: ['images', 'videos'], // 'images', 'videos', 'livePhotos' (iOS)

  // Édition
  allowsEditing: true,     // Autoriser le rognage
  aspect: [16, 9],         // Ratio d'aspect (uniquement avec allowsEditing)

  // Qualité
  quality: 1,              // 0-1 (1 = la plus élevée)

  // Plusieurs images
  allowsMultipleSelection: true,

  // Base64
  base64: false,           // Renvoyer aussi en base64

  // EXIF
  exif: true,              // Métadonnées de la photo
});

// Résultat
if (!result.canceled) {
  result.assets.forEach((asset) => {
    console.log('URI:', asset.uri);
    console.log('Largeur:', asset.width);
    console.log('Hauteur:', asset.height);
    console.log('Type:', asset.type); // 'image' ou 'video'
    console.log('Taille du fichier:', asset.fileSize);
    console.log('EXIF:', asset.exif);
  });
}

Composant de sélection de photo

interface ImagePickerButtonProps {
  onImageSelected: (uri: string) => void;
}

function ImagePickerButton({ onImageSelected }: ImagePickerButtonProps) {
  const showOptions = () => {
    Alert.alert(
      'Ajouter une photo',
      'Choisis la source',
      [
        { text: 'Caméra', onPress: takePhoto },
        { text: 'Galerie', onPress: pickFromGallery },
        { text: 'Annuler', style: 'cancel' },
      ]
    );
  };

  const takePhoto = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') return;

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 0.8,
    });

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

  const pickFromGallery = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 0.8,
    });

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

  return (
    <Pressable style={styles.button} onPress={showOptions}>
      <Ionicons name="camera" size={24} />
      <Text>Ajouter une photo</Text>
    </Pressable>
  );
}

expo-image-picker est la façon la plus simple de sélectionner des photos dans Expo !

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

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

  const pickFromGallery = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 0.8,
    });
    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  const takePhoto = async () => {
    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 0.8,
    });
    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  const showOptions = () => {
    // TODO : appelle Alert.alert avec le titre 'Ajouter une photo' et trois boutons :
    //   - { text: 'Caméra', onPress: takePhoto }
    //   - { text: 'Galerie', onPress: pickFromGallery }
    //   - { text: 'Annuler', style: 'cancel' }

  };

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={showOptions}>
        <Text style={styles.buttonText}>Ajouter une photo</Text>
      </Pressable>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#1a5276',
  },
  button: {
    backgroundColor: '#2980b9',
    padding: 14,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
  preview: { width: '100%', height: 250, borderRadius: 12, marginTop: 20 },
});