react-native: Gif data uri breaks Image component ios

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® Core™ 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

Add an Image component with a gif data uri

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

Launch an alert
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

BadImage mov

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 29

Most upvoted comments

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 <Image> 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! 😃

maximiliancsuk on Jul 31, 2020

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.

ragamufin on Dec 2, 2019

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

AppcDevSon on Jun 30, 2020

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

tikkichan4 on Jun 24, 2020

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

tikkichan4 on Feb 4, 2020

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

ghost on Dec 2, 2019