Commit Graph

33 Commits

Author SHA1 Message Date
Yujie Liu 8f9b291224 Providing an API to load assets from a different directory
Differential Revision: D6368586

fbshipit-source-id: 2a79ba45de3d9c95d0b1b296c9e1ae35cbd33c36
2017-12-08 15:01:40 -08:00
Pieter De Baets e1577df1fd Move all header imports to "<React/..>"
Summary:
To make React Native play nicely with our internal build infrastructure we need to properly namespace all of our header includes.

Where previously you could do `#import "RCTBridge.h"`, you must now write this as `#import <React/RCTBridge.h>`. If your xcode project still has a custom header include path, both variants will likely continue to work, but for new projects, we're defaulting the header include path to `$(BUILT_PRODUCTS_DIR)/usr/local/include`, where the React and CSSLayout targets will copy a subset of headers too. To make Xcode copy headers phase work properly, you may need to add React as an explicit dependency to your app's scheme and disable "parallelize build".

Reviewed By: mmmulani

Differential Revision: D4213120

fbshipit-source-id: 84a32a4b250c27699e6795f43584f13d594a9a82
2016-11-23 07:58:39 -08:00
Mehdi Mulani 820b1c0e46 Add partial image loading to RCTImageView
Reviewed By: javache

Differential Revision: D3856918

fbshipit-source-id: ca98f8604213e7e583a188ccc4c25ea9d7aa9aa2
2016-09-21 12:14:09 -07:00
Maria Mateescu 2a823bbc5c Add custom cache setter
Reviewed By: donyu

Differential Revision: D3622912

fbshipit-source-id: 675b3135212c73808cb18702c2cbf5684816df87
2016-08-01 22:13:27 -07:00
Maria Mateescu ddc70ffd85 Plug in the Cache to the ImageLoader
Reviewed By: donyu

Differential Revision: D3586563

fbshipit-source-id: 03f457df97066a522dc923b5f432314da40f7d71
2016-07-28 08:58:35 -07:00
Maria Mateescu f12d0a220b Create protocol for delegate for image cacheing
Reviewed By: donyu

Differential Revision: D3581390

fbshipit-source-id: 869437dd05db614f8191eab69723c4742df0637b
2016-07-28 08:58:34 -07:00
skatpgusskat 631785f2ee Change RCTImageLoader's Cache System to default NSURLRequest's cache system
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
2016-07-21 07:58:51 -07:00
Janic Duplessis 5903949ad6 Load local assets synchronously to prevent image flicker
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
2016-07-21 07:58:51 -07:00
Pieter De Baets 7e5de707be Remove deprecated RCTImageLoader methods
Reviewed By: mmmulani

Differential Revision: D3586474

fbshipit-source-id: b2be11d3673c3db1f3a79e0c4abfead8c988d82a
2016-07-21 07:58:51 -07:00
Pieter De Baets ff3ab32a72 Cleanup RCTImageLoader weakSelf/strongSelf
Reviewed By: mmmulani

Differential Revision: D3542393

fbshipit-source-id: b241586b0da254f688d0e8bdbf7d4ce72dc0d21f
2016-07-11 13:34:00 -07:00
Nick Lockwood 748a507861 Simplified Image.js
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
2016-06-07 05:43:28 -07:00
Adam Comella ee8496f364 iOS: Support HTTP headers for source prop on <Image> components
Summary:
Allows developers to specify headers to include in the HTTP request
when fetching a remote image. For example, one might leverage this
when fetching an image from an endpoint that requires authentication:

```
<Image
  style={styles.logo}
  source={{
    uri: 'http://facebook.github.io/react/img/logo_og.png',
    headers: {
      Authorization: 'someAuthToken'
    }
  }}
/>
```

Note that the header values must be strings.

Works on iOS and Android.

**Test plan (required)**

- Ran a small example like the one above on iOS and Android and ensured the headers were sent to the server.
- Ran a small example to ensure that \<Image\> components without headers still work.
- Currently using this code in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/7338

Reviewed By: javache

Differential Revision: D3371458

Pulled By: nicklockwood

fbshipit-source-id: cdb24fe2572c3ae3ba82c86ad383af6d85157e20
2016-06-01 10:43:28 -07:00
Nick Lockwood dc13115445 Dispatch module setup asynchronously to avoid blocking main thread when bridge starts
Summary:Initializing native modules can block the main thread for tens of milliseconds when it starts up, making it difficult to instantiate the bridge on demand without causing a performance blip.

This diff splits up the initialization of modules so that - although they still happen on the main thread - they don't block the thread continuously.

Reviewed By: javache

Differential Revision: D2965438

fb-gh-sync-id: 38c9c9d281e4672b5874d68b57d4c60d1d268344
shipit-source-id: 38c9c9d281e4672b5874d68b57d4c60d1d268344
2016-03-03 02:21:36 -08:00
Nick Lockwood 0427c3d273 Added throttling on requests made by RCTImageLoader
Reviewed By: javache

Differential Revision: D2938143

fb-gh-sync-id: bac1185d4792dcca0012905126c9ef2aa45905d5
shipit-source-id: bac1185d4792dcca0012905126c9ef2aa45905d5
2016-02-16 12:42:34 -08:00
Nick Lockwood 21fcbbc32c Generalized image decoding and resizing logic
Summary:
public

Standardises the image decoding logic for all image sources, meaning we get the benefits of efficient downscaling of images from all sources, not just ALAssets.

Reviewed By: javache

Differential Revision: D2647083

fb-gh-sync-id: e41456f838e4c6ab709b1c1523f651a86ff6e623
2016-01-20 11:11:13 -08:00
Nick Lockwood 718cd7953f Added getImageSize method
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
2015-12-31 18:51:30 -08:00
Nick Lockwood 1d6d1189f0 Improved threading for image loader
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
2015-10-20 05:02:23 -07:00
Nick Lockwood 1076f4a172 Added RCTDataRequestHandler
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
2015-10-19 09:07:06 -07:00
Nick Lockwood e4110456ab Changed RCTImageLoader to always return a UIImage
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.
2015-09-04 05:10:34 -08:00
Alex Akers 36444a65c7 Add pluggable image processing system 2015-09-02 08:31:34 -08:00
Nick Lockwood 1d852624fd Refactored RCTImageDownloader to use RCTNetworking instead of a separate download system 2015-07-27 13:47:52 -08:00
Nick Lockwood 2c5290946b Converted RCTImageLoader to be a bridge module 2015-07-27 08:52:20 -08:00
Philipp von Weitershausen 151ddd9e42 [React Native] open source ImageStoreManager native module and plug into RCTImageLoader 2015-07-20 22:48:54 -08:00
Nick Lockwood 61c648d564 Merged RCTNetworkImageView functionality into RCTStaticImage
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.)
2015-07-17 07:43:16 -08:00
Nick Lockwood b34a85f4da Merged RCTStaticImage with FB internal version
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.
2015-07-14 04:06:18 -08:00
Nick Lockwood f88bc3eb73 [ReactNative] Refactor RCTDataManager to support pluggable data source modules (RCTURLRequestHandlers)
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/
2015-06-09 12:27:06 -08:00
Nick Lockwood f4bf80f3ea [ReactNative] Allow uploading native files (e.g. photos) and FormData via XMLHttpRequest 2015-06-09 12:27:05 -08:00
Philipp von Weitershausen 3269af227f Back out D2098670: Allow uploading a native file (e.g. photo) via XMLHttpRequest 2015-05-26 12:50:25 -08:00
Philipp von Weitershausen 4273af9e29 Allow uploading a native file (e.g. photo) via XMLHttpRequest
Summary:
With this in place, it's possible to upload a picture from the `CameraRoll` to Parse, for instance:

    xhr = new XMLHttpRequest();
    xhr.onload = function() {
      data = JSON.parse(xhr.responseText);
      var parseFile = new Parse.File(data.name);
      parseFile._url = data.url;
      callback(parseFile);
    };
    xhr.setRequestHeader('X-Parse-Application-Id', appID);
    xhr.setRequestHeader('X-Parse-JavaScript-Key', appKey);
    xhr.open('POST', 'https://api.parse.com/1/files/image.jpg');
    // assetURI as provided e.g. by the CameraRoll API
    xhr.send(new NativeFile(assetURI));

Closes https://github.com/facebook/react-native/pull/1357
Github Author: Philipp von Weitershausen <philikon@fb.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-05-26 09:45:34 -08:00
Nick Lockwood cfeae15c1f Fixed thread safety for RCTImageLoader 2015-05-13 13:24:36 -07:00
Nick Lockwood 5e160f168d Added support for local image to RCTImageLoader 2015-05-13 13:24:35 -07:00
Christopher Chedeau 5baffa03fd Second Updates from Mon 23 Mar
- [ReactNative] Use deprecated ix in TabBarExample | Amjad Masad
- [ReactNative] Expanded license on obj-c files | Christopher Chedeau
- [ReactNative] Expanded license on js files | Christopher Chedeau
- [ReactNative] Fix React Devtools integration | Alex Kotliarskyi
- [Text] Account for font leading so descenders are not clipped | James Ide
- [ReactNative] Expanded license on js packager files | Christopher Chedeau
- more UIExplorer flow | Basil Hosmer
- [react-packager] Pick up package changes while running | Amjad Masad
- Added a graph view and a ReactNative metric that displays current queue and execution time for the JS thread. | Bryce Redd
- [ReactNative] Add NativeModules and DeviceEventEmitter to react-native exports | Alex Kotliarskyi
2015-03-23 15:07:33 -07:00
Alex Kotliarskyi fab5ec617d Updates from Tue Mar 10
- [ReactNative] Make tests run on TravisCI | Alex Kotliarskyi
- [Relay] Update Relay + ES6 class containers | Christoph Pojer
- [React Native] Add RCTAdSupport.xcodeproj | Alexsander Akers
- [ReactNative][Android] Fix after a new React version was downstreamed | Philipp von Weitershausen
- [React Native] Add preliminary animation API | Alex Akers
- [ReactKit] Create test for OSS ReactKit | Alex Kotliarskyi
- [React Native][Device ID][wip] implement most basic js access | Alex Akers
- [ReactNative] OSS Picker | Spencer Ahrens
- [ReactNative] Fix typo in RCTUIManager | Tadeu Zagallo
- [ReactNative] Fix GeoLocation files letter case | Tadeu Zagallo
- Unified the method signature for addUIBlock: to further simplify porting ViewManagers | Nick Lockwood
- [ReactNative] Oss GeoMap | Tadeu Zagallo
- [ReactNative] OSS CameraRoll | Tadeu Zagallo
- [ReactNative] allowLossyConversion on NSString->NSData conversion | Andrew Rasmussen
- [React Native][RFC] Print __DEV__ value on app start | Alex Kotliarskyi
2015-03-10 19:54:10 -07:00