expo-file-system et expo-sharing

Gère les fichiers et partage-les !

expo-file-system

npx expo install expo-file-system

import * as FileSystem from 'expo-file-system';

// Chemins des répertoires
const documentsDir = FileSystem.documentDirectory;
const cacheDir = FileSystem.cacheDirectory;

// Télécharger un fichier
async function downloadImage(url: string, filename: string) {
  const fileUri = `${FileSystem.documentDirectory}${filename}`;

  const downloadResumable = FileSystem.createDownloadResumable(
    url,
    fileUri,
    {},
    (progress) => {
      const percent = progress.totalBytesWritten / progress.totalBytesExpectedToWrite;
      console.log(`Téléchargé : ${Math.round(percent * 100)}%`);
    }
  );

  const result = await downloadResumable.downloadAsync();
  return result?.uri;
}

// Lire un fichier
async function readFile(filename: string) {
  const fileUri = `${FileSystem.documentDirectory}${filename}`;
  const content = await FileSystem.readAsStringAsync(fileUri);
  return content;
}

// Écrire un fichier
async function writeFile(filename: string, content: string) {
  const fileUri = `${FileSystem.documentDirectory}${filename}`;
  await FileSystem.writeAsStringAsync(fileUri, content);
}

// Infos sur le fichier
async function getFileInfo(uri: string) {
  const info = await FileSystem.getInfoAsync(uri);
  console.log('Existe :', info.exists);
  console.log('Taille :', info.size);
  console.log('URI :', info.uri);
  return info;
}

// Suppression
async function deleteFile(uri: string) {
  await FileSystem.deleteAsync(uri);
}

// Lister les fichiers
async function listDirectory(dir: string) {
  const files = await FileSystem.readDirectoryAsync(dir);
  return files;
}

expo-sharing

npx expo install expo-sharing

import * as Sharing from 'expo-sharing';
import * as FileSystem from 'expo-file-system';

async function shareImage(imageUri: string) {
  // Vérifier si le partage est disponible
  const isAvailable = await Sharing.isAvailableAsync();
  if (!isAvailable) {
    Alert.alert('Erreur', 'Le partage n\'est pas disponible sur cet appareil');
    return;
  }

  // Partager
  await Sharing.shareAsync(imageUri, {
    mimeType: 'image/jpeg',
    dialogTitle: 'Partager la photo',
  });
}

// Partager depuis une URL téléchargée
async function downloadAndShare(url: string) {
  const filename = url.split('/').pop() || 'file';
  const localUri = `${FileSystem.cacheDirectory}${filename}`;

  // Télécharger
  await FileSystem.downloadAsync(url, localUri);

  // Partager
  await Sharing.shareAsync(localUri);
}

expo-media-library

npx expo install expo-media-library

import * as MediaLibrary from 'expo-media-library';

// Enregistrer dans la galerie
async function saveToGallery(uri: string) {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status !== 'granted') return;

  const asset = await MediaLibrary.createAssetAsync(uri);

  // En option : ajouter à un album
  const album = await MediaLibrary.getAlbumAsync('Atlantis');
  if (album) {
    await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
  } else {
    await MediaLibrary.createAlbumAsync('Atlantis', asset, false);
  }

  Alert.alert('Succès', 'Photo enregistrée dans la galerie !');
}

// Récupérer les photos de la galerie
async function getPhotos() {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status !== 'granted') return [];

  const media = await MediaLibrary.getAssetsAsync({
    mediaType: 'photo',
    first: 20,
    sortBy: MediaLibrary.SortBy.creationTime,
  });

  return media.assets;
}

Ces bibliothèques te donnent un contrôle total sur les fichiers et les médias !

import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet, Alert } from 'react-native';
import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

export default function App() {
  const [busy, setBusy] = useState(false);

  const downloadAndShare = async () => {
    setBusy(true);
    const url = 'https://picsum.photos/600';
    const fileUri = `${FileSystem.cacheDirectory}atlantis.jpg`;

    // TODO : télécharge le fichier depuis l'URL vers fileUri :
    //   await FileSystem.downloadAsync(url, fileUri);

    // TODO : vérifie la disponibilité du partage :
    //   const isAvailable = await Sharing.isAvailableAsync();
    //   if (!isAvailable) { Alert.alert('Erreur', 'Partage non disponible'); return; }

    // TODO : partage le fichier téléchargé :
    //   await Sharing.shareAsync(fileUri);

    setBusy(false);
  };

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={downloadAndShare} disabled={busy}>
        <Text style={styles.buttonText}>{busy ? 'Téléchargement...' : 'Télécharger et partager'}</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a5276' },
  button: { backgroundColor: '#2980b9', paddingVertical: 14, paddingHorizontal: 32, borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});