React-native: Gif data uri breaks Image component ios

[eahrold]

Gif Data uri images dissapear when alert/modal/Share is launched on (iOS only).

React Native version:
System:
OS: macOS 10.15
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 8.25 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 21, 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 24.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.3
System Images: a...gle_apis | Google APIs Intel x86 Atom_64 ..., a... | Intel x86 Atom_64, a...pis | Google APIs ARM EABI v7a Syste..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a... | Intel x86 Atom_64, a...s_playstore | Google Play Intel x86 Atom Sys..., a...s_playstore | Google Play Intel x86 Atom Sys...
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

1. Add an Image component with a gif data uri

<Image
    source={{uri: 'data:image/gif;base64,R0lGODdhZABkA...'}}
    style={{backgroundColor: 'grey', width: 100, height: 100}}
/>

1. Launch an alert

2. Notice the
   NOTE this does't happen when the data uri is a png, it is only for a gif.

Describe what you expected to happen:
Image should not disappear

Snack, code example, screenshot, or link to a repository:

https://github.com/eahrold/Broken-RNImage-with-data-uri

[stevenschmatz]

+1

[ragamufin]

I'm also experiencing the same issue displaying a qr code as a gif base64 image. Going to background, opening the share dialog, causes the image to disappear. Even in the simulator opening the react native debug menu causes the image to disappear.

[DerrickC]

I noticed that this issue doesn't appear on iOS 12.4

[ragamufin]

It seems a similar issue was fixed in 2016 but now is back again for more recent versions of iOS. I tested on iOS 9.3 and there was no problem. For now I'm doing a hacky workaround of checking for iOS 13 and greater, listening to AppState change event and setting state on my image component with the app's current state. I pass that state to the key prop of the image. This way when the app comes from background the image is re-mounted since it's key will change from inactive/background to active.

Hopefully there will be a proper fix soon.

[kyleslight]

Same problem here on iOS 13.2.2

I find out that if the base64 string is relatively large(around 4kb), the image will hide after alert disappearing.

Is there any progress to fix this bug?

[tikkichan4]

I am looking for the solution too. This bug almost destroy my entire app :(

[lukeforehand]

I have a similar issue, I have an Image with a network source and it is a GIF. It renders at first, but when I switch screens and come back, it disappears. It happens when I load the image as a local source as well.
When I transform the GIF to a PNG, the image never disappears.

[lukeforehand]

I have a similar issue, I have an Image with a network source and it is a GIF. It renders at first, but when I switch screens and come back, it disappears. It happens when I load the image as a local source as well.
When I transform the GIF to a PNG, the image never disappears.

For me, a workaround was to add '?' + Math.random() to the source uri, but now I don't get to take advantage of caching and get a flicker as the image has to reload every time.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ragamufin]

this issue is still occurring for me on 0.62.2

[ikimiler]

+1

[tikkichan4]

Just tested on react native 0.63. The problem still happens and the gif image will be disappeared after switching app too.

[AppcDevSon]

I'm facing this issue as well, did anyone manage to solve this issue?

[kurnal]

I'm facing this problem too but not for all my GIFs. When I open modals or open an alert some of my GIFs just completely disappear. I verified that componentDidUpdate is not firing a rerender also ... they just disappear.

[ikimiler]

+1 please fix the bug

[ikimiler]

@eahrold hello，May I ask how you solved the problem

[eahrold]

@eahrold hello，May I ask how you solved the problem

@ikimiler For me it was specific to QR codes, and was able to use a PNG rather than a GIF, which works fine.
I would guess the ?${Math.random()} trick would work for you too, at a slight performance cost.

For me, a workaround was to add '?' + Math.random() to the source uri, but now I don't get to take advantage of caching and get a flicker as the image has to reload every time.

[ragamufin]

@eahrold I'm having the same problem with a gif QR code. Might I ask if you are generating the QR codes client side which library are you using?

[maximiliancsuk]

I'm facing the same issue!

For me, the image also disappears when the on-screen keyboard flips out because the user tapped into a text-box. I suspect(!) it also happens whenever the size that the image can take up changes... but I couldn't check that yet.
The workaround mentioned by @lukeforehand does indeed work for me too... but it's far from ideal. I'm showing images that are about 1mb in size when base64-encoded and the workaround makes the images flicker pretty badly on my iPad 4 Mini. :( I'm changing the key property of the every second instead of the source btw, because my source is a base64-encoded string.

The most infuriating thing is I never changed anything in my app, so the issue must have been introduced with an iOS update (I'm on 13.3.1).

Update: another workaround that seems to work much better is to also specify the "defaultSource" property in addition to the regular source property (works on ios only, but the bug is ios only anyway, so...). No flicker, image always showing and up-to-date! :)

[ikimiler]

@maximiliancsuk thx,This bug puzzled me for a long time

[HKGolden-Dev]

Issue occurs in the commit: 3b67bfa. I am able to use gif without disappearing gif & refreshing after using the old version of RCTGIFImageDecoder.

But it could be a bad practice as all the code related to gif are now renamed as RCTAnimatedImage, using the unrefined version of RCTGIFImageDecoder may not be a good idea.

[BalaManikantaB]

I am facing this issue too. Got it fixed by using react-native-fast-image. FastImage is an Image replacement that solves flickering, disappearing gifs and cache misses.