GiphyMediaView Not Rendering Background Alpha Correctly

[Kesmek]

🐛 Bug Report

On a fresh app (npx react-native init test --template react-native-template-typescript) I Followed the installation and basic usage instructions using all the default values for configuration. After selecting a sticker/text from the GiphyDialog and presenting it in a GiphyMediaView, it isn't rendering the alpha of stickers/text correctly, resulting in a checkerboard pattern behind the content. As of now I'm only able to verify this behaviour on android. Note that using a FastImage to present the content results in the correct behaviour.

To Reproduce

1. Select a sticker or text from a GiphyDialog and set it to a state variable, as per the documentation

const [media, setMedia] = useState<GiphyMedia | null>(null);
useEffect(() => {
    const handler: GiphyDialogMediaSelectEventHandler = e => {
      setMedia(e.media);
      GiphyDialog.hide();
    };
    const listener = GiphyDialog.addListener(
      GiphyDialogEvent.MediaSelected,
      handler,
    );
    return () => {
      listener.remove();
    };
  }, []);

2. Present the media in a GiphyMediaView, again like in the documentation

{media && (
      <GiphyMediaView
          media={media}
          style={{ aspectRatio: media.aspectRatio }}
      />
)}

Expected behavior

The background of stickers/text would be correctly rendered as transparent without the checkerboard pattern.

Actual Behavior

The background of stickers/text is a checkerboard pattern with no transparency.

Your Environment

• Giphy React Native SDK version: 1.3.0
• React Native version: 0.66.4
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Android simulator and real device, both debug and release variants on Android 12 (API 31)

Reproducible Demo

Create a new project with npx react-native init test --template react-native-template-typescript and yarn add @giphy/react-native-sdk as a dependency. Then simply use the code block listed under "basic usage" of the GiphyMediaView in the documentation. Note that I've also tried explicitly setting the "showCheckeredBackground" config to false on android, but this does not affect it.

[pshoniuk]

Hi @Kesmek, thanks for the report. We will add a new property to GiphyMediaView to control the checkered background in the next release.

[pshoniuk]

We recently released Giphy RN SDK v1.4.0 with the showCheckeredBackground property. This property will allow enabling/disabling the checkered background in GiphyMediaView.