Summary:
public
This diff adds a `getSize()` method to `Image` to retrieve the width and height of an image prior to displaying it. This is useful when working with images from uncontrolled sources, and has been a much-requested feature.
In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data.
A fully supported way to preload images will be provided in a future diff.
The API (separate success and failure callbacks) is far from ideal, but until we agree on a unified standard, this was the most conventional way I could think of to implement it. If it returned a promise or something similar, it would be unique among all such APIS in the framework.
Please note that this has been a long time coming, in part due to much bikeshedding about what the API should look like, so while it's not unlikely that the API may change in future, I think having *some* way to do this is better than waiting until we can define the "perfect" way.
Reviewed By: vjeux
Differential Revision: D2797365
fb-gh-sync-id: 11eb1b8547773b1f8be0bc55ddf6dfedebf7fc0a
Summary:
Problem: https://github.com/facebook/react-native/issues/4708
Solution: Added a ColorPropType that validates the color used by the dev
Notes:
1) I'm working a Win8.1 machine and couldn't build the react-native using the github repo. As soon as I figure that out, I'll probably figure how to run the tests and how to add some for this feature.
2) It's my first pull request. Be gentle :)
Closes https://github.com/facebook/react-native/pull/4866
Reviewed By: bestander, svcscm
Differential Revision: D2783672
Pulled By: nicklockwood
fb-gh-sync-id: ca22aa3c0999188075681b5d20fff0631496e238
Summary:
public
Added JS wrappers for ImageStore(Manager) and ImageEditor(Manager) so they can be required in the normal way instead of accessed directly via NativeModules.
Reviewed By: dmmiller
Differential Revision: D2773822
fb-gh-sync-id: 6eeafd3f80a87b1b91a04a2aebad6e2fd31b0e98
Summary:
public
A previous refactor introduced a bug where setting the tintColor of an <Image> to null no longer cleared the tint. This fixes it again.
Reviewed By: javache
Differential Revision: D2744279
fb-gh-sync-id: 1b5e0d546bf456d7b93e2ceee73c568c185c305c
Summary:
public
The +[RCTConvert UIImage:] function, while convenient, is inherently limited by being synchronous, which means that it cannot be used to load remote images, and may not be efficient for local images either. It's also unable to access the bridge, which means that it cannot take advantage of the modular image-loading pipeline.
This diff introduces a new RCTImageSource class which can be used to pass image source objects over the bridge and defer loading until later.
I've also added automatic application of the `resolveAssetSource()` function based on prop type, and fixed up the image logic in NavigatorIOS and TabBarIOS.
Reviewed By: javache
Differential Revision: D2631541
fb-gh-sync-id: 6604635e8bb5394425102487f1ee7cd729321877
Summary: ~~This is a WIP, just finished the first bit and wanted to get some feedback to see if this approach seems appropriate, as I haven't done a lot of Android development.~~
Looks ready for review now.
Closes https://github.com/facebook/react-native/pull/3791
Reviewed By: svcscm
Differential Revision: D2672262
Pulled By: mkonicek
fb-gh-sync-id: 1e8f1cc6658fb719a68f7da455f30a7c9b1db730
Summary: public
The `bridge.modules` dictionary provides access to all native modules, but this API requires that every module is initialized in advance so that any module can be accessed.
This diff introduces a better API that will allow modules to be initialized lazily as they are needed, and deprecates `bridge.modules` (modules that use it will still work, but should be rewritten to use `bridge.moduleClasses` or `-[bridge moduleForName/Class:` instead.
The rules are now as follows:
* Any module that overrides `init` or `setBridge:` will be initialized on the main thread when the bridge is created
* Any module that implements `constantsToExport:` will be initialized later when the config is exported (the module itself will be initialized on a background queue, but `constantsToExport:` will still be called on the main thread.
* All other modules will be initialized lazily when a method is first called on them.
These rules may seem slightly arcane, but they have the advantage of not violating any assumptions that may have been made by existing code - any module written under the original assumption that it would be initialized synchronously on the main thread when the bridge is created should still function exactly the same, but modules that avoid overriding `init` or `setBridge:` will now be loaded lazily.
I've rewritten most of the standard modules to take advantage of this new lazy loading, with the following results:
Out of the 65 modules included in UIExplorer:
* 16 are initialized on the main thread when the bridge is created
* A further 8 are initialized when the config is exported to JS
* The remaining 41 will be initialized lazily on-demand
Reviewed By: jspahrsummers
Differential Revision: D2677695
fb-gh-sync-id: 507ae7e9fd6b563e89292c7371767c978e928f33
Summary: public
A missing return statement in RCTImageLoader meant that cached images would be loaded twice - once from cache and again from the source.
This was mostly innocuous, causing only a slight perf regression due to the image cache being effectively disabled, however in some cases (such as RCTImageEditingManager.cropImage) it caused the success callback to fire twice, resulting in a crash.
Reviewed By: fkgozali
Differential Revision: D2684956
fb-gh-sync-id: 7580a6fbfe00a30807951803e04bfcdbee3bb80a
Summary: public
I had previously assumed (based on past experience and common wisdom) that `[UIImage imageWithData:]` was safe to call concurrently and/or off the main thread, but it seems that may not be the case (see https://github.com/AFNetworking/AFNetworking/pull/2815).
This diff replaces `[UIImage imageWithData:]` with ImageIO-based decoding wherever possible, and ensures that it is called on the main thread wherever that's not possible/convenient.
I've also serialized access to the `NSURLCache` inside `RCTImageLoader`, which was causing a separate-but-similar crash when loading images.
Reviewed By: fkgozali
Differential Revision: D2678369
fb-gh-sync-id: 74d033dafcf6c412556e4c96f5ac5d3432298b18
Summary: Hi,
I'm currently building an app that changes metadata, does some resizes, maybe watermarking ...etc. I want to use RCTImageStoreManager to store the original image in memory and allow me to command different modifications from javascript as it gives me more flexibility. As RCTImageEditingManager does for example.
But currently the RTCImageStoreManager uses UIImage to store the image, the problem is that UIImage losses metadata.
So i suggest we change it to NSData.
Additionally I added a method to remove an image from the store.
A related PR can be found here https://github.com/lwansbrough/react-native-camera/pull/100.
Closes https://github.com/facebook/react-native/pull/3290
Reviewed By: javache
Differential Revision: D2647271
Pulled By: nicklockwood
fb-gh-sync-id: e66353ae3005423beee72ec22189dcb117fc719f
Summary: public
Removed redundant calls to [RCTNetwork canHandleRequest] in release mode when loading images, and improved perf for handler lookups when running in debug mode.
Reviewed By: tadeuzagallo
Differential Revision: D2663307
fb-gh-sync-id: 13285154c1c3773b32dba7894d86d14992e2fd7d
Summary: This adds the basic support for embedding an image in a TextView.
Implementation details :
We create a ReactTextInlineImageShadowNode whenever an Image is embedded within a Text context.
That uses the same parsing code as ReactImageView (copied, not shared) to parse the source property to figure out the Uri where the resource is.
In ReactTextShadowNode we now look for the ReactTextInlineImageShadowNode and place a TextInlineImageSpan so that we can layout appropriately
Later at the time we go to setText on the TextView, we update that TextInlineImageSpan so that the proper Drawable (downloaded via Fresco) can be shown
public
Reviewed By: mkonicek
Differential Revision: D2652667
fb-gh-sync-id: 8f24924d204f78b8bc4d5d67835cc73b3c1859dd
Summary: Fixes#3679, see https://github.com/facebook/react-native/issues/3679
The idea is to always load images from the same folder that we loaded JS bundle.
This doesn't change the current behavior, since `imageNamed:` inferred the
absolute path to the image from app's bundle, but now we make it explicit.
The benefit for OTA updates implementations is that they can simply ask RN
to load js from some `~/Documents/<build-id>/main.jsbundle` folder and RN will
look for images in `~/Documents/<build-id>/assets/`.
Note that for Android we will have to come out with a different plan, since
in prod we load images from built-in resources.
public
Reviewed By: vjeux
Differential Revision: D2616995
fb-gh-sync-id: 2906c62380280ecb987525edf9a0e3e727a1008b
Summary: public
Added lightweight genarics annotations to make the code more readable and help the compiler catch bugs.
Fixed some type bugs and improved bridge validation in a few places.
Reviewed By: javache
Differential Revision: D2600189
fb-gh-sync-id: f81e22f2cdc107bf8d0b15deec6d5b83aacc5b56
Summary: public
The image loader was previously returning on the main thread, which could lead to poor performance due to various call sites doing further image processing (resizing, cropping, etc.) directly in the completion block.
This diff modifies the loader to return on a background thread (the same one used to load the image), and updates the call sites to dispatch to the explicit thread they need.
Reviewed By: javache
Differential Revision: D2549774
fb-gh-sync-id: fed73b7c163fdf67ff65bae72ab1986327e75815
Summary: public
If the frame is set, or the image view moves to a window, we should attempt to load the "real" image. The sizing logic shouldn't kick in if we're only displaying the default image.
Resolves https://github.com/facebook/react-native/issues/3460.
Reviewed By: tadeuzagallo
Differential Revision: D2555316
fb-gh-sync-id: c0c13070ee080bad2b30ca01d9d5173bead406e3
Summary: public
Added RCTDataRequestHandler, which is responsible for loading data URLs. This moves the logic for data URL handling out of RCTImageDownloader (no longer needed) and into the RCTNetwork library, where it makes more sense.
This also means that it is now possible to load data URLs via XHR, and use them for purposes other than just images.
Reviewed By: javache
Differential Revision: D2540964
fb-gh-sync-id: 4f0418bd6b9186f047cc8297276bb970795af104
Summary: public
There was a race condition issue in RCTDownLoadTask whereby the request handler would sometimes call one of the delegate methods before setup was complete, causing an error to be logged because the request token had not been set, and causing te request to fail because the class was not yet set up.
This diff fixes that issue by adding an explicit `start` method to RCTDownloadTask, and changing the setup order to allow for the request to call back immediately without this being treated as an error.
Reviewed By: tadeuzagallo
Differential Revision: D2553628
fb-gh-sync-id: 5ca4e791574a632ccbf2e873e28ac88bffdf851d
Summary: @public
We previously discovered that using an NSURLSessionDataTask to load local files is noticably less efficient than using regular filesystem methods.
This diff adds RCTFileRequestHandler as a replacement for RCTHTTPRequestHandler when loading local files. This reduces loading time when loading local files via XMLHttpRequest, as well as improving the performance for some image load requests.
Reviewed By: @javache
Differential Revision: D2531710
fb-gh-sync-id: 259714baac131784de494d24939f42ad52bff41a
Summary: @public
The legacy 'isStatic' property for image sources is no longer used anywhere in our codebase, but was still being generated by the packager and referenced in the JS in various places.
This diff removes all the remaining references.
Reviewed By: @frantic
Differential Revision: D2531263
fb-gh-sync-id: 0bba0bb8473b1baa908ef7507cbf6d83efb0d9ee
Summary: @public
This diff unifies the logic for detecting when images refer to XCAsset files into a single function (RCTXCAssetNameForURL) and uses it for both +[RCTConvert UIImage:] and RCTImageLoader.
I've also tightened the definition of XCAssets so that it only applies to images inside .car files, not any image inside the main bundle. This avoids using the +[UIImage imageNamed:] when not strictly necessary, which is desirable since that method is not thread-safe, and has undocumented caching behavior that is difficult to reason about.
Reviewed By: @javache
Differential Revision: D2526400
fb-gh-sync-id: 7199c2a44f1d55ff236d2c38a0a9368739b993d5
Summary: @public
This diff implements inline image support for <Text> nodes. Images are specified using <Image> tags, however all properties of the image are currently ignored apart from the source (including width/height styles).
Images are loaded asyncronously, and will trigger a text re-layout when they have loaded.
Reviewed By: @javache
Differential Revision: D2507725
fb-gh-sync-id: 59d0696d00a1bc531915cc35242a16b2dec96e85
Summary: When `RCTImageView` is removed from the view hierarchy, it clears out its `image` to save memory. This makes sense, except that it gets removed from the window (view hierarchy) even when becoming the child of another view.
This fixes the logic so that it only clears out the image if the view hasn't been moved somewhere else within one frame.
@public
Reviewed By: @javache
Differential Revision: D2493849
Summary: This sort of logging helped me identify issues with reloading images too frequently (and for trivial reasons), so leaving it in might be useful for future optimization work, or for anyone building apps using these components.
@public
Reviewed By: @alexeylang
Differential Revision: D2475613
Summary: @public
It's less important to reload for downscaling than upscaling, so increase the threshold in that direction. Also, this now considers each dimension separately, and a big enough change either way should result in a reload.
Finally, this considers both the current image size and the inflight target size, so we don't reload if either is already good.
Reviewed By: @tadeuzagallo
Differential Revision: D2470911
This is an early release and there are several things that are known
not to work if you're porting your iOS app to Android.
See the Known Issues guide on the website.
We will work with the community to reach platform parity with iOS.
Summary:
The CameraRoll-related APIs were mixed in with the Image classes due to legacy coupling issues. Now that the APIs have been decoupled, it makes more sense for the CameraRoll classes to live in a separate library.
This will be a breaking change for apps using the CameraRoll or related APIs. Fix is to add the RCTCameraRoll lib to your project.
Summary:
GIF images are currently loaded as a CAKeyframeAnimation, however returning this animation directly from RCTImageLoader was dangerous, as any code that expected a UIImage would crash.
This diff changes RCTGIFImageLoader to return a UIImage of the first frame, with the keyframe animation attached as an associated object. This way, code that is not expecting an animation will still work correctly.
Summary:
Currently, the system for mapping JS event handlers to blocks is quite clean on the JS side, but is clunky on the native side. The event property is passed as a boolean, which can then be checked by the native side, and if true, the native side is supposed to send an event via the event dispatcher.
This diff adds the facility to declare the property as a block instead. This means that the event side can simply call the block, and it will automatically send the event. Because the blocks for bubbling and direct events are named differently, we can also use this to generate the event registration data and get rid of the arrays of event names.
The name of the event is inferred from the property name, which means that the property for an event called "load" must be called `onLoad` or the mapping won't work. This can be optionally remapped to a different property name on the view itself if necessary, e.g.
RCT_REMAP_VIEW_PROPERTY(onLoad, loadEventBlock, RCTDirectEventBlock)
If you don't want to use this mechanism then for now it is still possible to declare the property as a BOOL instead and use the old mechanism (this approach is now deprecated however, and may eventually be removed altogether).
Summary:
require('./image.jpg') returns a number and therefore the propType is wrong. Adding it to the propType to fix the warning and dealing with flow which is completely broken for this.
Summary:
Our events all follow a common pattern, so there's no good reason why the configuration should be so verbose. This diff eliminates that redundancy, and gives us the freedom to simplify the underlying mechanism in future without further churning the call sites.
Summary:
Addresses #1534
When an image has a known width, but a height of 0 (which can happen if `flex: 1` is set on the `Image` element), `RCTDownloadManager` attempts to scale it to an invalid size, which results in a `NULL` `CGContextRef` and some scary warnings from UIKit:
```
<Error>: CGContextTranslateCTM: invalid context 0x0. This is a serious error. This application, or a library it uses, is using an invalid context and is thereby contributing to an overall degradation of system stability and reliability. This notice is a courtesy: please fix this problem. It will become a fatal error in an upcoming update.
```
This adds a check for zero width or height to the `RCTClipRect` function. If either dimension is zero, it is calculated based on the aspect ratio of the source image. This ensures that we don't try to create an invalid `CGContextRef`, and that images with an unknown dimension are still scaled, blended, etc.
Closes https://github.com/facebook/react-native/pull/2278
Github Author: Yusef Napora <yusef@napora.org>
Summary:
In the latest 0.9.0-rc of React Native, the default image won't load due to a typo and a missing condition in `setImage`. This PR contains fixes for both of them.
Closes https://github.com/facebook/react-native/pull/2269
Github Author: Tom Hastjarjanto <tom@intellicode.nl>
Summary:
For some reason we're now spamming the logs everytime we render an Image because overflow is not defined in the whitelist. overflow: 'hidden' is needed for network images with cover mode.
The way we currently define those is not optimal where we try to factor as many things as possible into distinct propTypes. However for Text we're not even using this but we are getting all the ones from View (which many do not apply) and remove some that aren't needed.
It may be useful to cleanup this in the future but in the short term, it's better to remove this warning that doesn't have much value anyway.
Summary:
This is a quick fix for the RCTDownloadTaskWrapper crashing on iOS 7. The issue was that the object returned by -[NSURLSession downloadTaskWithURL:] on iOS was not actually a subclass of NSURLSessionTask, so the category that adds associated blocks was not working. I've fixed that by making it a category on NSObject instead.
Summary:
This diff implements highlighting of tapped text subranges for the iOS `<Text>` component, styled to match how iOS webkit views highlight links (translucent grey overlay with rounded corners).
Highlighting is enabled by default for any `<Text>` component which has an onPress handler. To disable the highlight, add `suppressHighlighting={true}` to the component props.
Summary:
Update to https://github.com/facebook/react-native/pull/1969
--
Recent improvements allow RCTImageLoader to select a more appropriate sized image based on the layout dimensions. Sizes:
- asset.thumbnail
- asset.aspectRatioThumbnail
- asset.defaultRepresentation.fullScreenImage
- asset.defaultRepresentation.fullResolutionImage
Prior, only the fullResolutionImage was used. This was memory intensive and resulted in crashes when loading several large images at once. The updated implementation works well, but can be made more efficient:
Consider loading 10 8MP (3264x2448) images in 150x150 pixel containers. The target size (150x150) is larger than asset.thumbnail (approx 100x100), therefore the fullScreenImage representation is used instead (approx 1334x1000).
This commit will scale the asset to the minimum size required while taking into account original aspect ratio and device scale. Memory usage is considerably lower and many more images can be loaded in
sequence without having to worry
Closes https://github.com/facebook/react-native/pull/2008
Github Author: Adam Roth <adamjroth@gmail.com>
Summary:
RCTNetworkImageView and RCTStaticImage had significant overlap in functionality, but each had a different subset of features and bugs.
This diff merges most of the functionality of RCTNetworkImageView into RCTStaticImage, eliminating some bugs in the former, such as constant redrawing when properties were changed.
I've also removed the onLoadAbort event for now (as it wasn't implemented), and renamed the other events to match the web specs for `<img>` and XHMLHttpRequest. The API is essentially what Adobe proposed here: http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/
The following features have not yet been ported from RCTNetworkImageView:
- Background color compositing. It's not clear that this adds much value and it increases memory consumption, etc.
- Image request cancelling when images are removed from view. Again, it's not clear if this is a huge benefit, but if it is it should be combined with other optimisations, such as unloading offscreen images.
(Note that this only affects the open source fork. For now, internal apps will still use FBNetworkImageView for remote images.)
Summary:
RCTImageDownloader was ignoring server response codes. When receiving a response other than 200 it would treat this as success, meaning the image would never load, nor report failure.
This diff fixes that by treating responses with non-200 status as an error so that error handler is called.
Summary:
Merged RCTStaticImage with our internal RKStaticImage and ported over logic where assets are loaded at the optimal size and reloaded if the view size changes.
Summary:
Remote images now support the `tintColor` prop.
Also picked nicer demo colors for the UIExplorer example.
Fixes#1867
Closes https://github.com/facebook/react-native/pull/1932
Github Author: James Ide <ide@jameside.com>
Summary:
Change `RCTImageDownloader` so it stores the `RCTDownloadTaskWrapper` for reuse. Modify `RCTDownloadTaskWrapper` to use associated objects to store the completion/progress blocks.
Summary:
This PR adds 4 native events to NetworkImage.
Using these events I could wrap `Image` component into something like:
```javascript
class NetworkImage extends React.Component {
getInitialState() {
return {
downloading: false,
progress: 0
}
}
render() {
var loader = this.state.downloading ?
<View style={this.props.loaderStyles}>
<ActivityIndicatorIOS animating={true} size={'large'} />
<Text style={{color: '#bbb'}}>{this.state.progress}%</Text>
</View>
:
null;
return <Image source={this.props.source}
onLoadStart={() => this.setState({downloading: true}) }
onLoaded={() => this.setState({downloading: false}) }
onLoadProgress={(e)=> this.setState({progress: Math.round(100 * e.nativeEvent.written / e.nativeEvent.total)});
onLoadError={(e)=> {
alert('the image cannot be downloaded because: ', JSON.stringify(e));
this.setState({downloading: false});
}}>
{loader}
</Image>
}
}
```
Useful on slow connections and server errors.
There are dozen lines of Objective C, which I don't have experience with. There are neither specific tests nor documentation yet. And I do realize that you're already working right now on better `<Image/>` (pipeline, new asset management, etc.). So this is basically a proof concept of events for images, and if this idea is not completely wrong I could improve it or help somehow.
Closes https://github.com/facebook/react-native/pull/1318
Github Author: Dmitriy Loktev <unknownliveid@hotmail.com>
Summary:
This introduces a new `RCTResponseErrorBlock` block type that allows a bridge module writer to call it with an `NSError` instance rather than a dictionary.
Summary:
If you try to create a cached response from a nil response the app will crash. Looking at the code that uses NSURLSession and NSURLCache, this fix looks correct to me.
Fixes#1850
Closes https://github.com/facebook/react-native/pull/1852
Github Author: James Ide <ide@jameside.com>
Summary:
resizeMode is a native prop, but it is also in the propTypes, so this causes an incorrect warning:
```
Prop resizeMode = `contain` should not be set directly on Image.
```
@public
Test Plan: No warnings on image example in UIExplorer
Summary:
This PR adds support for UIImagePickerController to allow selecting a photo / video from the users camera roll.
Example:
Selecting something from camera roll
```
ImagePickerIOS.openSelectDialog(<config>, <successCallback>, <cancelCallback>);
ImagePickerIOS.openSelectDialog({
showImages: true, // defaults to true
showVideos: false // defaults to false
}, function (data) {
console.info("Got a callback!");
console.info(data); // file URL as in assets-library://asset/asset.JPG?id=E2741A73-D185-44B6-A2E6-2D55F69CD088&ext=JPG
}, function() {
console.info("Cancelled");
});
```
Using camera
```
ImagePickerIOS.openCameraDialog(<config>, <successCallback>, <cancelCallback>);
ImagePickerIOS.openSelectDialog({
videoMode: false, // defaults to true, whether to record videos instead
}, function (data) {
console.info("Got
Closes https://github.com/facebook/react-native/pull/1620
Github Author: David Mohl <me@dave.cx>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
@public
I've increased the warning levels in the OSS frameworks, which caught a bunch of minor issues. I also fixed some new errors in Xcode 7 relating to designated initializers and TLS security.
Test Plan:
* Test the sample apps and make sure they still work.
* Run tests.
Summary:
@public
This is a refactor of @philikon's original diff that decouples the dependencies between the Network and Image modules, and replaces RCTDataQueryExecutor with a more useful abstraction.
I've introduced the RCTURLRequestHandler protocol, which is a new type of bridge module used for loading data using an NSURLRequest. RCTURLRequestHandlers can be registered using RCT_EXPORT_MODULE() and are then available at runtime for use by the RCTDataManager, which will automatically select the appropriate handler for a given request based on the handler's self-reported capabilities.
The currently implemented handlers are:
- RCTHTTPRequestHandler - the standard open source HTTP request handler that uses NSURLSession
- RKHTTPRequestHandler - the internal FB HTTP request handler that uses FBNetworking
- RCTImageRequestHandler - a handler for loading local images from the iOS asset-library
Depends on D2108193
Test Plan:
- Internal apps still work
- OSS port still compiles, Movies app and a sample Parse app still work
- uploading image to Parse using the above code snippet works
- tested `FormData` with string and image parameters using http://www.posttestserver.com/
Nick Lockwood
StefanT
Qiao Liang
Justas Brazauskas
zjlovezj
sathis
Olivier Notteghem
Brent Vatne
Krzysztof Magiera
Matthieu Achard
Pawel Sienkowski
Dave Miller
Alex Kotliarskyi
Justin Spahr-Summers
Ben Alpert
Pieter De Baets
Dral
Christoph Pojer
Martin Konicek
Spencer Ahrens
Alex Akers
Oliver (Cunpu) Bo
Christopher Chedeau
Adam Roth
Yusef Napora
Tom Hastjarjanto
Philipp von Weitershausen
Dmitriy Loktev
James Ide
Eric Vicenti
David Mohl
