Gambar adalah elemen penting dalam banyak aplikasi mobile, dan dengan menggunakan React Native Expo, kita dapat dengan mudah mengintegrasikan fitur pengambilan foto dan pemilihan gambar dari galeri perangkat. Dalam tutorial ini, kita akan melihat bagaimana mengimplementasikan fitur ini dalam proyek React Native Expo.
Persiapan Awal
Sebelum kita mulai, pastikan Anda telah mempersiapkan lingkungan pengembangan React Native Expo di komputer Anda. Jika belum, Anda dapat menginstal Expo CLI dengan menjalankan perintah berikut melalui terminal:
|
1 |
npm install -g expo-cli |
Selanjutnya, buat proyek React Native Expo baru dengan perintah berikut:
|
1 2 |
expo init TakePictureExample cd TakePictureExample |
Kemudian, instal library Expo Camera dan Expo Image Picker yang diperlukan dengan menjalankan perintah berikut:
|
1 |
expo install expo-camera expo-image-picker |
Mengambil Foto dengan Kamera
Pertama, kita akan mengimplementasikan fitur pengambilan foto menggunakan kamera perangkat. Untuk itu, kita akan menggunakan komponen Camera dari Expo Camera.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import React, { useState, useEffect } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native'; import { Camera } from 'expo-camera'; export default function App() { // Kode lainnya const [hasPermission, setHasPermission] = useState(null); const [cameraType, setCameraType] = useState(Camera.Constants.Type.back); const [photo, setPhoto] = useState(null); // Kode lainnya const takePicture = async () => { if (cameraRef) { const photo = await cameraRef.takePictureAsync(); setPhoto(photo); } }; // Kode lainnya return ( <View style={styles.container}> <View style={styles.cameraContainer}> <Camera style={styles.camera} type={cameraType} ref={(ref) => (cameraRef = ref)} /> </View> <View style={styles.buttonContainer}> <TouchableOpacity style={styles.button} onPress={takePicture}> <Text style={styles.buttonText}>Take Picture</Text> </TouchableOpacity> {/* Kode lainnya */} </View> {photo && <Image source={{ uri: photo.uri }} style={styles.photo} />} </View> ); } const styles = StyleSheet.create({ // Kode lainnya }); |
Pada contoh di atas, kita menggunakan state untuk menyimpan foto yang diambil oleh kamera. Saat tombol “Take Picture” ditekan, fungsi takePicture akan dijalankan, dan foto akan disimpan dalam state photo.
Memilih Gambar dari Galeri
Selanjutnya, kita akan mengimplementasikan fitur pemilihan gambar dari galeri perangkat. Untuk itu, kita akan menggunakan Expo Image Picker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import * as ImagePicker from 'expo-image-picker'; // Kode lainnya const selectPicture = async () => { const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (status === 'granted') { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect: [4, 3], quality: 1, }); if (!result.cancelled) { setPhoto(result); } } }; // Kode lainnya return ( <View style={styles.container}> {/* Kode lainnya */} <TouchableOpacity style={styles.button} onPress={selectPicture}> <Text style={styles.buttonText}>Select Picture</Text> </TouchableOpacity> {/* Kode lainnya */} </View> ); |
Pada contoh di atas, saat tombol “Select Picture” ditekan, fungsi selectPicture akan dijalankan. Fungsi ini akan meminta izin akses ke galeri perangkat dan membuka galeri untuk memilih gambar. Gambar yang dipilih akan disimpan dalam state photo.
Tampilan Gambar Terpilih
Terakhir, kita akan menampilkan gambar yang diambil atau dipilih oleh pengguna di bawah tombol-tombol.
|
1 2 3 4 5 6 |
return ( <View style={styles.container}> {/* Kode lainnya */} {photo && <Image source={{ uri: photo.uri }} style={styles.photo} />} </View> ); |
Pada contoh di atas, kita menggunakan kondisi {photo && <Image source={{ uri: photo.uri }} style={styles.photo} />} untuk menampilkan gambar hanya jika photo tidak bernilai null.
Demo
Kesimpulan
Dalam tutorial ini, kita telah mempelajari cara mengintegrasikan fitur pengambilan foto dan pemilihan gambar dari galeri menggunakan React Native Expo. Dengan menggunakan Expo Camera dan Expo Image Picker, kita dapat dengan mudah mengakses fungsi kamera dan galeri perangkat dengan kode sederhana.
Anda dapat mengembangkan fitur-fitur tambahan berdasarkan contoh ini, seperti menyimpan foto ke penyimpanan, mengirim foto melalui jaringan, atau menerapkan filter gambar. Kemungkinan adalah tak terbatas!