평생 공부만 해야할듯

React Native에서 gif 로딩 이미지를 사용하려고 합니다.

iOS에서는 별다른 설정없이 Image 컴포넌트를 사용하여 gif 파일을 로드할 수 있는데요.

Android에서는 기본적으로 gif 파일을 지원하지 않기 때문에 별도의 모듈을 추가 해야 합니다.

# 소개

Fresco는 Android를 위해 이미지를 표시하는 강력한 시스템입니다.

메모리와 로컬 저장소를 사용하여 캐쉬처리를 하는것 외에도 많은 기능을 포함하고 있습니다.

https://fresco.recrack.com/

# 모듈 적용

공식 홈페이지에서 아래와 같은 선택적 모듈을 지원하고 있습니다.

https://reactnative.dev/docs/image#gif-and-webp-support-on-android

Android OS 4.0 (API Level 14) 이하 버전을 지원하는것과, WebP 지원여부에 따라 모듈을 추가하면 됩니다.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

제가 사용하는 프로젝트는 단순 gif를 로드하기 때문에 [implementation 'com.facebook.fresco:animated-gif:2.5.0']를 추가했습니다.

구글에서 search하여 다양한 글들이 나와있지만 fresco를 따로 추가한다거나 잘못된 방식이 많았습니다.

위와같이 한줄만 추가하여도 아래와같은 모듈들이 추가되어있으니 참고하면 됩니다.

이렇게 모듈을 추가하면 Android 업데이트를 해야하니 프로젝트 생성시 추가해주는것을 추천합니다.