Summary:
Here's a little background. Resizing is inferior to scaling. See http://frescolib.org/docs/resizing-rotating.html#_
Currently, React Native has a heuristic to use resize when the image is likely to be from the device's camera. However, there may be other cases where a developer wants to use resize. For example, when the developer knows they'll be downloading a large image from a service but the image will be rendered at a small size on the device.
This change adds a `resizeMethod` prop to the `Image` component so developers can choose how Fresco resizes the image. The options are 'auto', 'resize', or 'scale'. When 'auto' is specified, a heuristic is used to choose between 'resize' and 'scale'. The default value is 'auto'.
**Test plan (required)**
In a small test app, verified that the `resizeMethod` prop properly influences the mechanism that is used to resize the image (e.g. resize or scale).
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/9652
Differential Revision: D3841322
Pulled By: foghina
fbshipit-source-id: 6c78b5c75ea73053aa10386afd4cbff45f5b8ffe
Summary: Add a static `Image.queryCache` function that can query multiple URLs at once. The result is a map where each URL that is in cache is mapped to the cache type (memory/disk). URLs that are not cached do not appear in the result.
Reviewed By: lexs
Differential Revision: D3791333
fbshipit-source-id: b183015d97423f0c095bf891f035dac2e23d8d11
Summary: This allows the onLoad callback to know which image has actually loaded. This is only for iOS at the moment - implementing this for Android will require quite a bit more work.
Reviewed By: majak
Differential Revision: D3738759
fbshipit-source-id: b1fc2bd0dc5de90096debeab02b8f795739a4547
Summary:
fixes#7795fixes#8500
Motivation: When having a simple button that changes the Image source when tapped, the image doesn't change (or at least sometimes, intermittently it works).
This was found to be an issue where the request was being sent to the native layer correctly but then being subsequently cancelled by the `reactSetFrame: method` ...
Closes https://github.com/facebook/react-native/pull/9137
Differential Revision: D3702867
Pulled By: javache
fbshipit-source-id: c89ce6b841179394b6b23850b3128751ef9e0313
Summary:
I've seen quite a few newbs trip on this, so I'm fixing it.
First - you have to set the width/height on a remote image, otherwise nothing shows. This is [even on stack overflow](http://stackoverflow.com/questions/30091398/unable-to-display-image-with-react-native-with-uri).
Second - with the addition of ATS in iOS most people who copy/paste this example will not be able to load an insecure image, so I changed it to the `https`.
**RESULT** this doc becomes copy/paste friendly again for beginners.
Closes https://github.com/facebook/react-native/pull/9235
Differential Revision: D3675478
Pulled By: JoelMarcey
fbshipit-source-id: 5b414caa40cda72dec4eace686278c26c251c4bb
Summary:
It seems like the `resizeMode` propType was missing from `Image.android.js`, this PR adds it.
I caught by trying to use `Image.propTypes.resizeMode` on Android, and getting a warning because it was `undefined`.
It's not supposed to break anything, maybe pop a few warnings but not much more.
**Test Plan:**
- Launched UIExplorer
Closes https://github.com/facebook/react-native/pull/7355
Differential Revision: D3648559
fbshipit-source-id: a4397938d14c11ded909d6bf4652a4b0fcebed3b
Summary: Mirrors Android's support for multiple sources for Image, allowing us to fetch new images as the size of the view changes.
Reviewed By: mmmulani
Differential Revision: D3615134
fbshipit-source-id: 3d0bf2b75f63a4379e0e49f2dab9aea351b31d5f
Summary:
There is a conflict between RCTImageLoader and RCTAssetsLibraryRequestHandler on handling images, which was caused by making RCTPhotoLibraryImageLoader able to handle assets library requests as well. This gives more priority to RCTImageLoader instead.
Fixes#9031.
Reviewed By: mmmulani
Differential Revision: D3627451
fbshipit-source-id: 7ffd2c66f43ce1479c9a117768fb2d29f9d0dc08
Summary:
Before this PR, ```RCTImageLodaer```'s Cache was too big(200MB on disk) and It doesn't work with HTTP Cache-Control header. So to provide dynamic image, the users must have to add random value on url( ex. adding current date) to avoid cache.
So I change that cache system to default ```NSURLRequest```'s cache system, which is well-working with HTTP specs. As the discussion on this issue #7571 , making custom cache policy processor is not ready yet and useless, over-tech things, I think.
Even we have no plan about image cache system(or would change plan later), before having a nice plan, I think we should let user use image module with common HTTP Specs.
So I remove custom ```NSURLCache```, and make logic like below,
1. try fetch image,
2. on response, get ```Date``` on response's header and make ```cacheKey``` with ```Date```.
> (why? because if ```NSURLRequest```'s response was cached, the response's ```Date``` header dosen't change.)
3. find decoded imag
Closes https://github.com/facebook/react-native/pull/8235
Reviewed By: bnham
Differential Revision: D3469086
Pulled By: javache
fbshipit-source-id: 35a5552cda6e6c367481020bbf3c28eb4a9d0207
Summary:
This uses `[UIImage imageNamed:]` to load local assets that are bundled using `require('../image/path.png')` and makes sure it is done synchronously on the main queue to prevent images from flickering. This improves user experience a lot when using large local images and prevents icon flickers to match the behaviour of most native apps.
This adds to methods to the ImageLoader protocol, one to tell if the image loader must be executed on the url cache queue and one to tell if the result of the image loader should be cached. I then use these to make the LocalImageLoader bypass the url cache queue and avoid caching images twice.
Note that this doesn't affect debug builds since images are loaded from the packager.
I'm not sure if we want to still support async loading of local images as I'm not sure how much of a perf difference this will make. Maybe someone at fb can benchmark this see how it affects your apps but there wasn't a noticeable one in mine. Also I only enabled this for loading png and jpg im
Closes https://github.com/facebook/react-native/pull/8102
Reviewed By: bnham
Differential Revision: D3433647
Pulled By: javache
fbshipit-source-id: 37bd6aff20c0465c163db3cdbcaeaedff55f7b1f
Summary:
Addresses this comment: https://github.com/facebook/react-native/issues/2296#issuecomment-232446493
This pull request adds the `center` value to `ImageResizeMode`.
When set, it will center the image within its frame.
If the image is larger than its frame, the image is downscaled while maintaining its aspect ratio.
That is how the Android implementation works, too.
Sorry, don't have time to write tests. 😢
Any reviewers should make sure `RCTTargetRect` returns the correct value when:
- the image is smaller than its frame (ie: no downscaling needed)
- the image is larger than its frame (should be downscaled to avoid clipping)
Closes https://github.com/facebook/react-native/pull/8792
Differential Revision: D3586134
Pulled By: javache
fbshipit-source-id: 78fb8e5928284003437dac2c9ad264fa584f73ec
Summary:
I would like to believe it's some black magic code but no it's just a typo.
Closes https://github.com/facebook/react-native/pull/8712
Differential Revision: D3550809
fbshipit-source-id: 00a7ba1cbcd36e29af44cdefd5fc1148d11d26e3
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.
Reviewed By: astreet
Differential Revision: D3509863
fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
Summary:
Hi there,
Here is a fix for #7538 (and #5085).
I had originally discovered this issue when using `resizeMode` through the style props. Although this might arguably be an incorrect usage (see https://github.com/facebook/react-native/issues/4759#issuecomment-164301166) the same issue would happen with the `tintColor` and `overlayColor` style props.
To test this, you can render the following:
```jsx
const imageContainerStyle = {width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, };
const imageStyle = {flex: 1, width: undefined, height: undefined, resizeMode: 'contain', };
return (
<View style={styles.container}>
<View style={imageContainerStyle}>
<Image style={imageStyle} source={
{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}
}>
</Image>
</View>
<View style={imageContainerStyle}>
<Image style={imageStyle} source={
{
Closes https://github.com/facebook/react-native/pull/8410
Differential Revision: D3488010
Pulled By: andreicoman11
fbshipit-source-id: e9d1283cce8426c8878f9c3c66a43a2141232277
Summary:
GIF Image will disappear after press the home button and return back.
Set `removedOnCompletion` to be`false` will fix all `CAAnimation` disappear like stopping after going into the background.
Closes https://github.com/facebook/react-native/pull/7612
Differential Revision: D3481403
fbshipit-source-id: 101bded300f5e34bb53ec6c54a40eb5aece22fba
Summary:
This adds a new resize mode for iOS 'repeat' that tiles the image over it's frame. This allow to easily create a view with a repeating background pattern which there is no way to do at the moment without including a bunch of different sized assets.
I'm not 100% sure it should be a resizeMode or a separate prop but I went with resizeMode since it made more sense to me and the are not really any use cases where we'd want to use this with another resizeMode other than 'stretch'.
**Test plan**
Tested mainly by adding a UIExplorer example, also tested that changing the resizeMode prop from and to 'repeat' worked properly.
I'd like to implement this on Android too but it is a bit trickier since Fresco's ImageView doesn't support image tiling and would require submitting a PR there too :(
Closes https://github.com/facebook/react-native/pull/7968
Differential Revision: D3469119
Pulled By: javache
fbshipit-source-id: ab9dbfe448a5b0771dbf0c41fcceeb366210f583
Summary:
This adds support for specifying multiple sources for an image component, so that native can choose the best one based on the flexbox-computed size of the image.
The API is as follows: the image component receives in the `source` prop an array of objects of the type `{uri, width, height}`. On the native side, the native component will wait for the layout pass to receive the width and height of the image, and then parse the array to find the best fitting one. For now, this does not support local resources, but it will be added soon.
To see how this works and play with it, there's an example called `MultipleSourcesExample` under `ImageExample` In UIExplorer.
Reviewed By: foghina
Differential Revision: D3364550
fbshipit-source-id: 66c5aeb2794f2ffeff8da39a9c0b95155fb2d41f
Summary:
Under rare and as-yet-to-be determined circumstances, images can sometimes fail to load/download and get "stuck", without producing an error.
Because the `RCTNetworkTask` for these images is stuck in the "in progress" state, they clog up the RCTImageLoader task queue, which has a limit of 4 concurrent in-progress tasks.
This was previously masked by the fact that we automatically cancelled image requests when the RCTImageView moved offscreen, but we no longer do that.
This diff adds logic to detect some types of stuck task and remove them, thereby unblocking the queue. I've also restored the functionality of cancelling downloads for offscreen images (but not unloading the image itself) so that stuck images will be cancelled when you move to another screen, instead of using up space in the queue forever.
Reviewed By: fkgozali
Differential Revision: D3398105
fbshipit-source-id: 75ee40d06a872ae8e1cb57f02f9cad57c459143c
Summary:
Now that we no longer have a separate NetworkImageView implementation, we can remove that code path from Image.js
I've also moved the prefetch method into RCTImageViewManager for consistency with the getImageSize method, which means we no longer need to export the RCTImageLoader module to js.
Reviewed By: javache
Differential Revision: D3398157
fbshipit-source-id: fbbcf90a61549831ad28bad0cb3b50c375aae32c
leeight
Adam Comella
Pieter De Baets
Felix Oghina
Alon Schwarz
Alexander Jarvis
David Aurelio
Gant
Konstantin Raev
Maria Mateescu
Jimmy Mayoukou
Nicolas Charpentier
David Goldman
Nathan Azaria
Scott Wolchok
Olivier Notteghem
skatpgusskat
Janic Duplessis
aleclarsoniv
yeshuang
Jesse Luo
Skotch Vail
Christoph Pojer
Jean Regisser
Joel Marcey
wenzhao.yin
Andrei Coman
Kasim Tan
Nick Lockwood
Maarten Schumacher
