틱톡같은 짧은 영상 리스트업하는 앱을 만들고싶습니다

ScrollView를
pagingEnabled={true} 한 후 그 안에 react native video의 video로 리스트업하였습니다.

파일이 조금만 커도 앱이 버벅거리고 영상을 받아오는 속도가 굉장히 느리네요…
제가 여지껏 알아본 바로는 영상을 캐시로 저장해두고 저장된 파일을 틀어주면 속도가 더 빠르다던데 어떤 방법으로 캐시로 저장할지도 잘 모르겠습니다.

혹시 비디오 리스트업하는 것에 대해서 잘 아시는 분 조언 부탁드립니다.

여기보시면 어떤방법으로 하는지 잘 기술되어 있기는 하지만 ios에 국한됩니다.

위 패키지를 한번 사용해보시면 어떨까요?

react-native-fs를 써서 사용하는 방법도 있습니다.

https://www.addwebsolution.com/blog/complete-guide-image-video-caching-react-native

그런데 제 생각에는 media player 자체를 생성하는데 로드가 심할걸로 예상이됩니다. ViewHolder라는 개념을 써서 저 친구들이 무한적으로 재성성되는 것도 방지하는지 확인해보셔야할 것 같습니다.

제가 알기론 아직 RecyclerView가 아니라서 불안요소가 있어보이는데
위와 같은 문제를 해결하기 위해 아래 패키지를 이용해보는 것을 권장드립니다.

네 감사합니다! 알려주신대로 react-native-fs를 사용해서 코드를 짜 보았습니다.
let filename =‘myawsomevideo.mp4’;

let path_name = RNFS.DocumentDirectoryPath + filename;
RNFS.exists(path_name).then(exists => {
  if (exists) {
    console.log("Already downloaded");
    this.setState({
      path:path_name
    })
  } else {
    RNFS.downloadFile({
      fromUrl: videoUrl,
      toFile: path_name.replace(/%20/g, "_"),
      background: true
    })
      .promise.then(res => {
        console.log("File Downloaded", res);
        this.setState({
          path:path_name
        })
      })
      .catch(err => {
        console.log("err downloadFile", err);
      });
  }
});

      <Video source={{uri: this.state.path}}   
        muted={false}
        repeat={true}
        onBuffer={()=>{
          console.log('onBuffer')
        }}
        paused={(()=>{
          if(this.state.pauseIndex===false){
            return false;
          }else{
            return this.props.paused===false&&this.props.index===Math.round(this.props.scrollY)?false:true;
          }
        })()}
        resizeMode={'cover'}
        onLoad={()=>{
          this.setState({
            pauseIndex:true
          })
        }}
        style={styles.backgroundVideo} 
      />

위와 같이 코드를 짜 보았습니다.

한 가지 의문점이 있습니다. 만약 핸드폰 내 저장소에 동영상들로 꽉꽉차면 그 다음은 어떻게 되나요?? 캐시 저장이 더 이상 되지 않나요?? 아니면 이전 파일을 자동으로 삭제되고 다른 파일로 덮어씌워지나요?

추가적으로 업로드할 비디오의 용량이 너무 커서 비디오의 퀄리티를 좀 떨어트리는 방법으로 용량을 줄여서 업로드 하고싶은데, 이에 대한 좋은 방법 조언 받을 수 있을까요?
react-native-video-processing 저는 이 방법을 써서 해결해 보려 했지만 ios에서는 빌드 오류가 자꾸 떠서 다른 방법으로 시도해보려고 합니다.

한편으로 react-native-image-crop-picker 는 이미지를 고를 때 quality prop을 조정하는 간단한 방법으로 적은 용량의 이미지를 갤러리로부터 가져올 수 있었습니다.

비디오도 이렇게 간단한 방법으로 갤러리에서 적은 용량의 파일로 가져올 수 있을까요?