React Native’de galeri fotoğrafları nasıl görüntülenir? (CameraRoll kullanımı)

Öncelikle projeminizi oluşturalım ve boş haliyle çalıştıralım:

npx react-native init SampleRNCameraRoll --template react-native-template-typescript
cd SampleRNCameraRoll
npx react-native run-ios

Projemize CameraRoll kütüphanesini ekleyelim, pod’ları yükleyelim, projeyi git’e ekleyelim ve vscode ile açalım

yarn add @react-native-community/cameraroll
npx pod-install
git init
git add .
git commit -m "First commit"
code .

iOS yapılandırma

Fotoğraf okuma/yazma izinlerinin otomatik olarak alınabilmesi için ios/SampleRNCameraRoll/Info.plist dosyasında NSLocationWhenInUseUsageDescription key’inin üstüne aşağıdaki satırları ekleyelim:

<key>NSPhotoLibraryUsageDescription</key>
<string>Fotoğraf görüntüleme için dosya izni vermeniz gereklidir.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Fotoğraflarınızın kaydedilebilmesi için izniniz gereklidir.</string>

Android yapılandırma

android/app/src/main/AndroidManifest.xml dosyasında üst kısma aşağıdaki permission’ı ekleyelim:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Not: Android tarafında, gerekli izinleri manifest dosyasına eklesek dahi, çalışma zamanında JS tarafında harici olarak izinleri istememiz gereklidir. iOS’deki gibi otomatik izin alma olayı bulunmamaktadır.

CameraRoll kütüphanesinin kullanımı

CameraRoll kütüphanesinin kullanımı en basit haliyle aşağıdaki gibidir:

import React, {useState} from 'react';
import {
  Platform,
  PermissionsAndroid,
  SafeAreaView,
  Button,
  FlatList,
  Image,
} from 'react-native';
import CameraRoll, {PhotoIdentifier} from '@react-native-community/cameraroll';
const App = () => {
  const [images, setImages] = useState<PhotoIdentifier[]>([]);
  const requestStoragePermision = () => {
    PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      {
        title: 'Fotoğraf izni',
        message:
          'Fotoğraf görüntüleme için dosya okuma izni vermeniz gereklidir.',
        buttonNeutral: 'Daha sonra sor',
        buttonNegative: 'İptal',
        buttonPositive: 'Tamam',
      },
    )
      .then((granted) => {
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('İzin verildi');
          getPhotos();
        } else {
          console.log('İzin verilmedi');
        }
      })
      .catch((e) => console.log(e));
  };
  const handleButtonPress = () => {
    if (Platform.OS === 'android') requestStoragePermision();
    else getPhotos();
  };
  const getPhotos = () => {
    CameraRoll.getPhotos({
      first: 25,
      assetType: 'Photos',
    })
      .then((r) => {
        console.log(r);
        setImages(r.edges);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  return (
    <SafeAreaView>
      {images.length === 0 && (
        <Button title="Galeriyi aç" onPress={handleButtonPress} />
      )}
      <FlatList
        data={images}
        keyExtractor={(data) => data.node.image.uri}
        numColumns={3}
        renderItem={(data) => (
          <Image
            style={{height: 100, flex: 1}}
            source={{uri: data.item.node.image.uri}}
          />
        )}
      />
    </SafeAreaView>
  );
};
export default App;

Farkedeceğiniz üzere cihaz Android ise PermissionsAndroid.request metodu ile izin isteği gönderiyoruz. iOS’te izin alma işini kendisi otomatik olarak gerçekleştiriyor.

Sonuç Olarak

CameraRoll kütüphanesinin kullanımı oldukça sade ve anlaşılır. Siz de buradaki yönergeleri izleyerek kendi galeri uygulamanızı oluşturabilirsiniz.

Projenin bitmiş halini react-native-cameraroll-sample reposunda bulabilirsiniz. Bu yazı hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…