[RN] gif 적용하기

반응형

gif 이미지를 사용해야하는데 gif, webP는 안드로이드에서 지원하지 않는다고 한다

그래서 따로 관련 설정을 해주어야한다

공홈을 참고해서 설정 고고

 

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

Image · React Native

 

 

android/app/build.gradle의 디펜던시에 아래 속성을 추가해주었다(출처: RN 공홈)

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:3.2.0'

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

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

 

https://github.com/facebook/react-native/blob/main/packages/react-native/gradle/libs.versions.toml

위 깃헙에서 fresco 버전을 확인할 수 있다

 

fresco란?

https://github.com/facebook/fresco

페북에서 만든 안드로이드 어플리케이션 관련 라이브러리다

이미지, 이미지가 저장되는 메모리를 관리를 쉽게 할 수 있다고 한다

fresco 깃헙을 보면 fresco에서 gif, webP를 지원한다고 한다 

그래서 fresco 관련 설정을 해주는구만

 

내가 설정을 적용할 때 당시의 버전은 3.2.0이라서 위 설정에서 버전을 수정했다

설정이 끝났다면 아래와 같이 사용해주면 된다

 

// 외부에서 이미지 받아올 때
 <View style={styleSheet.img_container}>
        <Image source={{uri: 'http://www.example.com/example.gif'}}/>
 </View>
 
// 로컬 이미지 불러올 때
 <View style={styleSheet.img_container}>
        <Image source={require:('../assets/example.gif')}/>
 </View>