[React Native] WebP 적용하기

React Native는 webp를 지원하지만 , 애니메이션이 있는 webp는 지원하지 않는다.

라이브러리의 힘을 빌리자.

 

1. react-native-webp-format 설치

 

 

2. Android 추가 설정

 

Add the following dependencies to android/app/build.gradle:

dependencies {
  ...
    implementation 'com.facebook.fresco:webpsupport:2.5.0'
    // Optionally, to display animated WebP images, you have to add:
    implementation 'com.facebook.fresco:animated-webp:2.5.0'
  ...
}

 

3. iOS 추가 설정

- 라이브러리에 설명되어 있지 않다. 추가로 설정해주자!

Go to your ios -> [App name folder] -> Edit AppDelegate.m

#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // . . .

    [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];

    // . . .
}

 

4. 결과

잘 띄워진다 유후!