[ReactNative] - rn-fetch-blob OR @react-native-community/cameraroll 사용하여 앱에 파일 저장하기

이미지 및 동영상 같은 파일을 다운 받아야 할 경우가 있다.

 

다운 받은 파일을 앱에서 특정 디렉토리에 저장시켜야 할 경우 경로를 찾아야 하기 위해 rn-fetch-blob라는 라이브러리를 활용할 수 있다.

npm i rn-fetch-blob

yarn add rn-fetch-blob

 

설치 한 뒤 

 

원하는 경로를 찾아 지정을 하여 파일을 다운로드 해준다.

 

const destinationPath = `${RNFetchBlob.fs.dirs.PictureDir}/${dateToString(date,)}.${movieExt}`;

RNFetchBlob.config({
      fileCache: true,
      appendExt: ext,
      path: destinationPath,
    })
  .fetch('GET', imageUrl)
  .then(res => {
    console.log('파일 다운로드 완료:', res.path());
  })
  .catch(error => {
    console.log('파일 다운로드 에러:', error);
  });

 

여기서 RNFetchBlob.fs.dirs 안에 있는 값에 따라 초기 패스값이 달라지는데 PictureDir는 사진경로라고 한다.

 

나는 사진첩에 다운받은 파일을 저장시키고 싶어 해당 경로를 사용하였지만, 이상하게도 내가 원하는 공간에 파일이 저장되지 않았다.

 

그 외 평균적으로 많이 사용하는 경로는

DocumentDir

DownloadDir

가 있으며 해당 경로는 말그대로 앱안에 기본 탑재 되어 있는 파일이라는 앱에 설치 되는 경로이다.

 

그럼 RNFetchBlob.fs.dirs.DocumentDir 해당 경로를 기준으로 파일 관리를 위해 디렉터리를 추가할 생각이라면 

RNFetchBlob.fs.dirs.DocumentDir/디렉터리/파일명 

형식으로 생성해주면 된다.

 

여기서 위에 말한 것 처럼 난 사진첩에 파일을 저장시키고 싶었지만, 해당 라이브러리만으로는 불가능하였다.

 

방법을 찾기 위해 찾아낸 라이브러리는 @react-native-cameraroll/cameraroll, @react-native-community/cameraroll 였지만

 

아쉽게도 두개의 라이브러리는 더이상 지원이 되지 않아 사용이 안된다.

 

하지만 포기하지 않고 찾아낸 결과 @react-native-community/cameraroll 라는걸 발견할 수 있었다.

 

해당 라이브러리는 @react-native-community/cameraroll 라이브러리와 유사하여 자료가 부족하더라도 유사 라이브러리 덕분에 어떻게 해서든 진행이 가능하였다.

npm i @react-native-camera-roll/camera-roll

yarn add @react-native-camera-roll/camera-roll

import {
  CameraRoll,
  PhotoIdentifier,
} from "@react-native-camera-roll/camera-roll";

CameraRoll.save(res.path());
if (res) {
  Alert.alert('파일 다운로드 완료');
}

 

사용 방법은 매우 간단하였으며, 우린 파일을 다운받기 위해 사용하는 것으로 save를 사용하여 사진첩에 설치가 가능하다.

 

최종 코드

import RNFetchBlob from 'rn-fetch-blob';
import {
  CameraRoll,
  PhotoIdentifier,
} from "@react-native-camera-roll/camera-roll";

const destinationPath = `${RNFetchBlob.fs.dirs.PictureDir}/${dateToString(date,)}.${movieExt}`;

RNFetchBlob.config({
  fileCache: true,
  appendExt: ext,
  path: destinationPath,
})
  .fetch('GET', imageUrl)
  .then(res => {
    console.log('파일 다운로드 완료:', res.path());
    CameraRoll.save(res.path());
    if (res) {
      Alert.alert('파일 다운로드 완료');
    }
  })
  .catch(error => {
    console.log('파일 다운로드 에러:', error);
  });
};

 

이미지 주소를 위해 기존에 사용하였던 rn-fetch-blob를 사용하여 경로를 가져와서 camera-roll를 활용하여 사진첩에 무사히 저장할 수 있었다.

 

하지만 사실상 사진첩에 저장하는 부분이라면 굳이 rn-fetch-blob를 안써도 무관하다. 해당 파일에 대한 url 주소만 명확하다면 다운로드 하는 부분에서는 문제가 없다.

 

해당 작업을 하게 된 이유는 Android에서는 자체적으로 사진첩에 저장이 되지만, IOS 경우는 직접 경로를 알려주지 않으면 저장이 안되기 때문이다.

 

추가적으로 해당 라이브러리를 사용하기 위해선 사진첩 권한이 필요하다.

 

참고자료

GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module that provides access to the

 

Using react-native-cameraroll to enable camera roll access - LogRocket Blog