React.Image doesn't support animated GIFs on iOS

[zertosh]

Seems like it only shows the first frame. I'm loading http addresses, not local or static image resources - not sure if that makes a difference.

[vjeux]

cc @nicklockwood

[a2]

iOS image views do not natively support animated GIFs. There are 3rd party libraries out there that convert animated GIFs into native image sequences. I'll look into support for this soon. 👍

[zertosh]

Thanks @a2 and @vjeux!

[frantic]

@a2 How about SVGs too? :)

[zertosh]

Looks like it was fixed in 6153fff. Thanks!

[zertosh]

Yeah it's workin'

[a2]

@zertosh 👍
@frantic, I'd like to leave out SVG parsing for now because it adds a lot of unnecessary bloat to the binary. Perhaps a plug-in would be a good fit for this?

GIF support is landed so I'm going to close this now. 🙇

[vjeux]

Yup, SVG seems more suited for a different target rather than the Image component

[zertosh]

I think I misunderstood the mission/role of react-native. I can't find it in the docs, but I walked away with the idea that Components would map closely to their native counterpart. So, if UIImage doesn't support gifs, but <Image /> does, then I must be mistaken. Does this also mean that the Andriod version of <Image /> will support gifs? What if there are components that can't reconcile their feature set across platforms? I understand that the goal is not to "write-once run everywhere", but does this mean that core components will diverge significantly between platforms? I'm not complaining - I like the gif support - I'm just looking for clarification.

[vjeux]

@zertosh very good question :) Here's a very nuanced answer.

In my mind, the reason why the "write once, run everywhere" approaches fail is that your only possibility is to use the cross platform components. You don't have the ability to use the native components from the platform.

With React native, it's a requirement to be able to use the native elements from the platform, be Navigator for iOS, Drawer for Android or <video> on web. But, that doesn't mean that we should share nothing.

There's a very interesting property which is that if you don't have the same building blocks (div, View...) then you CANNOT share ANY line of UI code. A concrete example is that we wanted to share a <Timestamp> component and we had to copy and paste it because span did not exist in React native context.

So, we decided to have some core components (View, Image, ScrollView, ...) that work on all the platforms and are a lowest common denominator that works everywhere. I was extremely surprised but it turns out that this subset is actually pretty large. The innovative things from platform to platform are not much in the low level details like border or background color, but in high level components.

Right now, there are some attributes for those that are platform specific like alwaysBounceVertical for ScrollView. So we're probably going to split it into two components: <ScrollView> that is the subset that works everywhere and <ScrollViewIOS> that contains platform specific attributes.

There's still a lot of unknowns in the API design that we want to figure out :)

[zertosh]

@vjeux: Thank you for the detailed answer. I'm happy to hear that baseline and platform specific components are being considered. Feels like a very web thing to do. It'll be interesting to see how the polyfill/shim world develops around this, and to what extent devs will take a progressive enhancement approach to building cross-platform components (if they do at all).

[vjeux]

We're in the middle of our first conversion from an app written on iOS to Android. Here's the setup that we decided on so far.

All the iOS specific implementations have a barely functional and super ugly version for Android that only uses core components such as View and Text. The goal of those "polyfills" is such that the app compiles and runs in all the platforms, but there are ugly red components everywhere. Then, you can start figuring out the best solution finding an Android-friendly way to deal with those iOS components.

You'll probably end up rewriting a large part of your UI in order to make it look and feel good on Android, but you can do that iteratively and not having to fix all of them before anything even compiles.

This is still a very new territory for us and this may or may not be a viable solution :p

[wong2]

does defaultSource support GIFs? I tried and it seems not working

[nicklockwood]

No, it probably doesn't. I'll file a task to fix that.

[wong2]

@nicklockwood thanks, waiting for this

[wong2]

@nicklockwood any updates on this? 😄

[SelmanKahya]

Is GIF still supported? I am trying to display an animated GIF as follows:
<Image source={require('image!sandglass')} />

PNG works just fine, but I am getting the following error when I try to render animated GIF in my view. Restarting the package manager doesn't help. Any ideas?

[ide]

AFAIK remote gifs are supported. Try a URL.

[nicklockwood]

Gifs should work for both remote and local images, but there might be an issue using them with the require() syntax. Try just using the file name (including extension) as the uri value.

[SelmanKahya]

Yea, using uri worked fine, thanks.
<Image style={styles.gif} source={{ uri: 'test.gif' }} />

[magicismight]

This
<Image source={{uri: 'load.gif'}} style={{height: 40, width: 40}} />
will throw an exception in RCTGIFImage.m
<Error>: ImageIO: CGImageSourceGetType image source parameter is nil

[ghost]

Confirming the syntax @SelmanH used to load a gif works when image added in Copy Bundle Resources build phase for the main target in Xcode.

[miracle2k]

Gifs animated fine when read from a URL. If I load the same image locally (via Copy Bundle Resources), it is displayed, but does not animate anymore:

 <Image style={{height: 128, width: 170, marginTop: 20}}
      source={{ uri: 'alphabets-children-5-277623.gif' }} />

[sudhanshu6247]

I am having just opposite problem. In my case gif is not getting loaded from url but when I load it from local it works fine.

<Image style={{maxWidth: deviceWidth-112, resizeMode:'contain', maxHeight: 300}} source={{uri: 'https://s3-ap-southeast-1.amazonaws.com/healthmirdev/channel/gifs/anxiety.gif'}}  />