Tujuan Pembelajaran

Mampu menggunakan expo-image-picker untuk akses galeri dan kamera
Memahami permission handling untuk akses media
Mengerti cara crop dan compress gambar

Analogi

Diagram


      Image Picker = Fotografer Pribadi:
1. Minta izin → "Boleh pinjam kamera & galerimu?"
2. User pilih → pilih dari album atau ambil baru
3. Dapat foto → dalam bentuk URI + metadata
4. Crop & compress → sebelum upload ke server

Image picker seperti fotografer — minta izin dulu, user pilih sumber, dapat foto, lalu bisa diedit sebelum dikirim.

Penjelasan Konsep

expo-image-picker menyediakan akses ke galeri dan kamera device — pilih foto existing atau ambil foto baru. API simpel: launchImageLibraryAsync() untuk galeri, launchCameraAsync() untuk kamera.

Setup: (1) Install: npx expo install expo-image-picker. (2) Plugin di app.json: expo-image-picker dengan photosPermission dan cameraPermission descriptions. (3) Minta permission sebelum akses: ImagePicker.requestMediaLibraryPermissionsAsync().

Options: (1) mediaTypes: Images, Videos, All. (2) allowsEditing: true untuk crop UI native. (3) aspect: [4, 3] untuk crop aspect ratio. (4) quality: 0-1 untuk kompresi. (5) base64: true untuk dapat base64 string.

Hasil: { cancelled: false, assets: [{ uri, width, height, type, fileSize }] }. URI adalah path lokal — file:///.... Untuk upload ke server, gunakan FormData dengan URI.

Permission pattern: (1) Cek status: getPermissionsAsync(). (2) Kalau denied: requestPermissionsAsync(). (3) Kalau blocked (user permanen tolak): arahkan ke Settings — Linking.openSettings(). (4) Re-check setiap kali sebelum panggil API.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu menggunakan expo-image-picker untuk akses galeri dan kamera., memahami permission handling untuk akses media., dan mengerti cara crop dan compress gambar. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca expo-image-picker & Camera Access, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Image picker seperti fotografer — minta izin dulu, user pilih sumber, dapat foto, lalu bisa diedit sebelum dikirim. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. requestPermissionsAsync sebelum launchImageLibrary. allowsEditing untuk crop. quality 0.8 untuk compress. result.canceled cek untuk user cancel.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

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

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

  const pickImage = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== "granted") { alert("Izin galeri diperlukan"); return; }
    const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"], allowsEditing: true, aspect: [1, 1], quality: 0.8 });
    if (!result.canceled) setImage(result.assets[0].uri);
  };

  return (
    <View>
      <Pressable onPress={pickImage}><Text>Pilih Foto</Text></Pressable>
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}

Penjelasan Kode

requestPermissionsAsync sebelum launchImageLibrary. allowsEditing untuk crop. quality 0.8 untuk compress. result.canceled cek untuk user cancel.

Prompt AI

Buat komponen AvatarPicker: user bisa pilih foto profil, crop 1:1, dan preview sebelum upload. Handle permission denied dengan graceful fallback.

Pertanyaan Reflektif

Bagaimana aplikasi-aplikasi yang sering kamu pakai meminta izin kamera/galeri? Apakah UX-nya baik? Apa yang bisa kamu perbaiki?