React-native-fast-image: Support Base64 animated Webp Images on iOS

[lmarques6]

Describe the bug
Attempting to display an animated webp image on iOS after loading it as a base64 encoded string. Works fine for Android but displays nothing on iOS.

To Reproduce

1. Import an animated webp image (ex. import sampleImg from 'path/image.webp';)
2. Use the imported image as a source for FastImage component (ex. {uri: sampleImg})

Expected behavior
Expect the image to be displayed and animated on both iOS and Android, but only works on Android.

Dependency versions

• React version: 16.8.6
• React Native version: 0.60
• React Native Fast Image version: 7.0.2

[edwinwong90]

@lmarques6 I have the issue like you. This is what I found out and it works for me!

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];

    // . . .
}

Personally thinking this is the missing part in the Docs.

[MegaX8892]

@edwinwong90 It works for me. Thanks !

[chesteripz]

I have the same issue. For webp file, it works fine. However, I couldn't manage to render Base64 encoded webp on iOS.
```
source={{ uri: 'data:image/webp;base64,xxxxxxxxxxx' }}
style={{ width: 98, height: 98 }} />

The exact same code does work properly on Android.

react: 16.8.6
react-native: 0.60.5
react-native-fast-image: 7.0.2
```

[twestos]

I have the same issue. For webp file, it works fine. However, I couldn't manage to render Base64 encoded webp on iOS.

<FastImage
   source={{ uri: 'data:image/webp;base64,xxxxxxxxxxx' }}
   style={{ width: 98, height: 98 }} />

The exact same code does work properly on Android.

react: 16.8.6
react-native: 0.60.5
react-native-fast-image: 7.0.2

Also having trouble with this

[oste]

Same. Tested base64 webpage on iOS safari and chrome. Same result. I think it could be a OS issue

[chesteripz]

Same. Tested base64 webpage on iOS safari and chrome. Same result. I think it could be a OS issue

All browsers on iOS are the native Safari, but with Chrome/Firefox-theme, and it simply doesn't support Webp at all, no matter it's base64 or Webp file.

[oste]

Oh I thought iOS 10 had support. Will have to double check.

[tgdevma]

@edwinwong90 That works for me too. Thanks !

Of course the Podfile needs to be be updated too:

pod 'SDWebImageWebPCoder'

This same solution is also mentioned in https://github.com/DylanVann/react-native-fast-image/pull/454#discussion_r277512690

[MandipGiri]

@edwinwong90 That works for me too. Thanks.

[migueldaipre]

Has anyone found a solution for base64 files?