Comments (24)
from react-native.
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.
from react-native.
@a2 How about SVGs too? :)
from react-native.
Looks like it was fixed in 6153fff. Thanks!
from react-native.
from react-native.
@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.
Yup, SVG seems more suited for a different target rather than the Image component
from react-native.
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.
@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.
@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.
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.
does defaultSource
support GIFs? I tried and it seems not working
from react-native.
No, it probably doesn't. I'll file a task to fix that.
from react-native.
@nicklockwood thanks, waiting for this
from react-native.
@nicklockwood any updates on this? π
from react-native.
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?
from react-native.
AFAIK remote gifs are supported. Try a URL.
from react-native.
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.
Yea, using uri worked fine, thanks.
<Image style={styles.gif} source={{ uri: 'test.gif' }} />
from react-native.
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.
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.
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.
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)
- No haptic feedback when using RefreshControl with a tintColor prop
- Uncontrolled input value clears when color is changed HOT 1
- [0.74] New app hangs on blank screen if dev server is not started HOT 3
- `selectOnFocus` does not work with `autoFocus` HOT 2
- Android Native Module: Unresolved reference: PackageList HOT 2
- [0.73.6] HOT 2
- γiOSγThe contentOffset property is missing from TextInputView's onScroll callback HOT 4
- Animated.Event not working attached to onLayout with useNativeDriver enabled HOT 2
- [iOS][Information] App store submissions will require a privacy manifest and signature for hermes HOT 3
- Cookies not being sent to webview for iOS after React Native Upgrade HOT 4
- [0.74] Cannot access Dev Menu on Android (RNTester) HOT 4
- TextInput contextMenuHidden does not hide autofill HOT 1
- Showing Recent Messages Command PhaseScriptExecution failed with a nonzero exit code HOT 3
- Unknown unicode characters in Image source broken on iOS in New Architecture HOT 1
- TouchableWithoutFeedback crashes when SVG component is a direct child of it HOT 2
- FBReactNativeSpec build commands failed with RN 0.71.4 / Xcode 15.3 / M2 HOT 6
- error `fsevents` unavailable (this watcher can only be used on Darwin) HOT 2
- `@synthesize bridge = _bridge` not working with bridgeless mode and TurboModule
- No bundle url is present when run ios app on real iphone device HOT 3
- The application is slow after running for a long time without being used HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.