Giter Site home page Giter Site logo

Comments (24)

vjeux avatar vjeux commented on March 29, 2024

cc @nicklockwood

from react-native.

a2 avatar a2 commented on March 29, 2024

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. πŸ‘

from react-native.

zertosh avatar zertosh commented on March 29, 2024

Thanks @a2 and @vjeux!

from react-native.

frantic avatar frantic commented on March 29, 2024

@a2 How about SVGs too? :)

from react-native.

zertosh avatar zertosh commented on March 29, 2024

Looks like it was fixed in 6153fff. Thanks!

from react-native.

zertosh avatar zertosh commented on March 29, 2024

Yeah it's workin'
react-native-image-gifs

from react-native.

a2 avatar a2 commented on March 29, 2024

@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. πŸ™‡

from react-native.

vjeux avatar vjeux commented on March 29, 2024

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

from react-native.

zertosh avatar zertosh commented on March 29, 2024

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.

from react-native.

vjeux avatar vjeux commented on March 29, 2024

@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 :)

from react-native.

zertosh avatar zertosh commented on March 29, 2024

@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).

from react-native.

vjeux avatar vjeux commented on March 29, 2024

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

from react-native.

wong2 avatar wong2 commented on March 29, 2024

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

from react-native.

nicklockwood avatar nicklockwood commented on March 29, 2024

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

from react-native.

wong2 avatar wong2 commented on March 29, 2024

@nicklockwood thanks, waiting for this

from react-native.

wong2 avatar wong2 commented on March 29, 2024

@nicklockwood any updates on this? πŸ˜„

from react-native.

SelmanKahya avatar SelmanKahya commented on March 29, 2024

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?

screen shot 2015-05-31 at 12 57 11 am

from react-native.

ide avatar ide commented on March 29, 2024

AFAIK remote gifs are supported. Try a URL.

from react-native.

nicklockwood avatar nicklockwood commented on March 29, 2024

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.

from react-native.

SelmanKahya avatar SelmanKahya commented on March 29, 2024

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

from react-native.

magicismight avatar magicismight commented on March 29, 2024

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

from react-native.

 avatar commented on March 29, 2024

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.

from react-native.

miracle2k avatar miracle2k commented on March 29, 2024

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' }} />

from react-native.

sudhanshu6247 avatar sudhanshu6247 commented on March 29, 2024

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'}}  />

from react-native.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.