Commit Graph

218 Commits

Author SHA1 Message Date
sunnylqm edb523c6d7 adjust getSize so that its doc can be shown on the page
Summary: Closes https://github.com/facebook/react-native/pull/5426

Reviewed By: svcscm

Differential Revision: D2848229

Pulled By: nicklockwood

fb-gh-sync-id: d1cc28af889c3b1e26a098044e85e0b10032a776
2016-01-21 08:23:36 -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 e4c53c28ae Improved shadow performance
Summary:
public
React Native currently exposes the iOS layer shadow properties more-or-less directly, however there are a number of problems with this:

1) Performance when using these properties is poor by default. That's because iOS calculates the shadow by getting the exact pixel mask of the view, including any tranlucent content, and all of its subviews, which is very CPU and GPU-intensive.
2) The iOS shadow properties do not match the syntax or semantics of the CSS box-shadow standard, and are unlikely to be possible to implement on Android.
3) We don't expose the `layer.shadowPath` property, which is crucial to getting good performance out of layer shadows.

This diff solves problem number 1) by implementing a default `shadowPath` that matches the view border for views with an opaque background. This improves the performance of shadows by optimizing for the common usage case. I've also reinstated background color propagation for views which have shadow props - this should help ensure that this best-case scenario occurs more often.

For views with an explicit transparent background, the shadow will continue to work as it did before ( `shadowPath` will be left unset, and the shadow will be derived exactly from the pixels of the view and its subviews). This is the worst-case path for performance, however, so you should avoid it unless absolutely necessary. **Support for this may be disabled by default in future, or dropped altogether.**

For translucent images, it is suggested that you bake the shadow into the image itself, or use another mechanism to pre-generate the shadow. For text shadows, you should use the textShadow properties, which work cross-platform and have much better performance.

Problem number 2) will be solved in a future diff, possibly by renaming the iOS shadowXXX properties to boxShadowXXX, and changing the syntax and semantics to match the CSS standards.

Problem number 3) is now mostly moot, since we generate the shadowPath automatically. In future, we may provide an iOS-specific prop to set the path explicitly if there's a demand for more precise control of the shadow.

Reviewed By: weicool

Differential Revision: D2827581

fb-gh-sync-id: 853aa018e1d61d5f88304c6fc1b78f9d7e739804
2016-01-14 14:04:34 -08:00
Geoffrey Goh e730a9fdd0 Load assets from same folder as JSbundle (Android)
Summary:
https://github.com/facebook/react-native/issues/3679 was only partially fixed as the behaviour only works on iOS. This implements the same behaviour for Android. If the JSBundle was loaded from the assets folder, this will load images from the built-in resources. Else, load the image from the same folder as the JS bundle.

EDIT: For added clarity:

On iOS,
Bundle Location: 'file:///Path/To/Sample.app/main.bundle'
httpServerLocation: '/assets/module/a/'
Name: 'logo'
type: 'png'
**Resolved Asset location: '/Path/To/Sample.app/assets/module/a/logo.png'**

On Android,
Bundle Location: 'file:///sdcard/Path/To/main.bundle'
httpServerLocation: '/assets/module/a/',
name: 'logo'
type: 'png'
**Resolved Asset location: 'file:///sdcard/Path/To/drawable_mdpi/module_a_logo.png'**
Closes https://github.com/facebook/react-native/pull/4527

Reviewed By: svcscm

Differential Revision: D2788005

Pulled By: mkonicek

fb-gh-sync-id: 3f6462a7ee6370a92dd6727ac422c5de346c3ff1
2016-01-06 08:46:35 -08:00
Milen Dzhumerov 7d70b86a7b RCTImageUtils Obj-C nullability annotations
Summary:
Add Objective-C nullability annotations to RCTImageUtils

public

Reviewed By: nicklockwood

Differential Revision: D2797310

fb-gh-sync-id: 08329f70d1a09bf47865c9e7e76d7b4340eb6e80
2016-01-06 03:55:30 -08:00
Satyajit Sahoo 68147cf39c Update references to `image!` to use require syntax
Summary: Closes https://github.com/facebook/react-native/pull/5089

Reviewed By: svcscm

Differential Revision: D2798548

Pulled By: androidtrunkagent

fb-gh-sync-id: 9e561fcfc103102d4c4bfbebc463eadb2fdd561a
2016-01-04 07:41:27 -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 55fe7ac9ae Fix flow errors
Reviewed By: gabelevi

Differential Revision: D2796260

fb-gh-sync-id: 8425e57a313326afb6f6ae5bb8b86a569f462b06
2015-12-31 07:48:29 -08:00
StefanT a162f72655 Added ColorPropType
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
2015-12-23 10:08:38 -08:00
Nick Lockwood 83c2e0303b Added JS wrappers for ImageStore and ImageEditor
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
2015-12-23 10:08:07 -08:00
Qiao Liang edc318fcb9 added doc for image resizeMode
Summary:
based on 62e8ddc205/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java  and http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Closes https://github.com/facebook/react-native/pull/4799

Reviewed By: svcscm

Differential Revision: D2762795

Pulled By: androidtrunkagent

fb-gh-sync-id: 2906c9f334f0afd4d58d4864a2b8472a5a871fc0
2015-12-15 17:34:29 -08:00
Justas Brazauskas 0e8b207cc3 Bugfix - Typos
Summary:
Fixed few typos in `./Examples` and `./Libraries` folders.
Closes https://github.com/facebook/react-native/pull/4788

Reviewed By: svcscm

Differential Revision: D2759918

Pulled By: androidtrunkagent

fb-gh-sync-id: d692b5c7f561822353e522f9d4dfde7e60b491cf
2015-12-15 09:09:32 -08:00
zjlovezj 484fe9155b add backfaceVisibility to ImageStylePropTypes
Summary:
to eliminate to yellow box.
ViewStylePropTypes also has this prop.
0a3694ce48/Libraries/Components/View/ViewStylePropTypes.js
Closes https://github.com/facebook/react-native/pull/4765

Reviewed By: svcscm

Differential Revision: D2754433

Pulled By: androidtrunkagent

fb-gh-sync-id: 4bb53213aea6f7d629b31e0e4d4a46ae980ff219
2015-12-14 18:57:31 -08:00
Nick Lockwood ce7c0b735f Fixed image tinting
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
2015-12-10 09:09:30 -08:00
Nick Lockwood b672294858 Added RCTImageSource
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
2015-12-08 03:32:30 -08:00
sathis abea6c30b4 Make style property available in Image.android.js like Image.ios.js
Summary:
Thanks ahanriat for pointing out  :)
Closes https://github.com/facebook/react-native/pull/4618

Reviewed By: svcscm

Differential Revision: D2729582

Pulled By: androidtrunkagent

fb-gh-sync-id: df7b9af24cc035c7a9618a7850d628961fcd776b
2015-12-07 10:47:28 -08:00
Olivier Notteghem a38ce5c570 match RN attachment images Feed experience with Native with spinner/fade in
Reviewed By: astreet

Differential Revision: D2722917

fb-gh-sync-id: a09b9a1a4b9a19b94471d8e93ec5bde53af7da06
2015-12-06 15:48:34 -08:00
Brent Vatne ae09a10c95 Add onLoadX support on Android
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
2015-11-25 18:30:31 -08:00
Nick Lockwood 060664fd3d Refactored module access to allow for lazy loading
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
2015-11-25 04:49:45 -08:00
Nick Lockwood f827a513a1 Fixed double-callback for cached images
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
2015-11-23 04:20:28 -08:00
Nick Lockwood 0fe074acbd Removed all calls to [UIImage imageWithData:] on a background thread
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
2015-11-20 05:17:33 -08:00
Krzysztof Magiera f2545bafc9 Use requireNativeComponent everywhere.
Reviewed By: sahrens

Differential Revision: D2663780

fb-gh-sync-id: 94a7e2265f6f869a2bdf1576dd8ea76b4c5f0b34
2015-11-18 09:43:28 -08:00
Matthieu Achard 2b657003b7 RTCImageStoreManager uses NSData instead of UIImage
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
2015-11-17 09:55:31 -08:00
Pawel Sienkowski 5367e841ad Weak RCTBridge reference in RCTImageView
Reviewed By: nicklockwood

Differential Revision: D2660517

fb-gh-sync-id: 45a5e2b936cfb4b87a09ad7a756c030376d59da3
2015-11-17 09:14:30 -08:00
Nick Lockwood 5b796cec34 Reduced work done on main thread by RCTImageLoader
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
2015-11-17 07:21:29 -08:00
olivier notteghem 5217c8273f enabling progressive Jpeg rendering (part 2/2)
Reviewed By: nspaun

Differential Revision: D2658991

fb-gh-sync-id: 13a103458c30ea3e8f0cb37456d09f70f4e76e4a
2015-11-16 11:43:27 -08:00
Nick Lockwood fa0b45c58b Replaced RCTSparseArray with NSDictionary
Reviewed By: jspahrsummers

Differential Revision: D2651920

fb-gh-sync-id: 953e2ea33abfc7a3a553da95b13e9ab2bccc5a1c
2015-11-14 10:28:28 -08:00
Dave Miller a0268a7bfc Initial checkin for Image within Text nodes
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
2015-11-13 11:16:27 -08:00
Nick Lockwood 2eb8068cf1 Improved and generalized image thumbnail decoding logic
Reviewed By: jspahrsummers

Differential Revision: D2631934

fb-gh-sync-id: 3ddea328dcb0fc84b9d7b20708324f0b515f1b7f
2015-11-10 05:04:34 -08:00
Alex Kotliarskyi 10b599c343 Load assets from same folder as JS bundle
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
2015-11-05 12:53:26 -08:00
Nick Lockwood 8db1e1262e Attempt to fix RCTImageLoader crash
Reviewed By: jspahrsummers

Differential Revision: D2620944

fb-gh-sync-id: 39896c8aa6f162df5769afdd0f947acf4bb5cb76
2015-11-05 09:09:29 -08:00
Nick Lockwood c5b990f65f Added lightweight generic annotations
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
2015-11-03 14:49:30 -08:00
Nick Lockwood 666833d2d2 Fixed RCTImageStoreManager bug
Reviewed By: tadeuzagallo

Differential Revision: D2565154

fb-gh-sync-id: a9b6df27e4c54d5c3a9ad42dc5b821729d445c9e
2015-10-21 13:19:28 -07: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
Justin Spahr-Summers 123516d556 Reload RCTImageView when it's displaying the default image
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
2015-10-19 10:26:24 -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 16a48ae0c3 Fixed "Unrecognized request token" red box
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
2015-10-17 09:34:23 -07:00
Nick Lockwood a92f107712 Added RCTFileRequestHandler
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
2015-10-13 08:14:28 -07:00
Nick Lockwood 5b425278bb Removed references to isStatic from the codebase
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
2015-10-13 06:44:30 -07:00
Nick Lockwood 261100d9d0 Fix data url support
Reviewed By: @tadeuzagallo

Differential Revision: D2535768

fb-gh-sync-id: 537ecc462e4a8a9e807ccad28a715419f4d5f355
2015-10-13 06:44:23 -07:00
Alex Kotliarskyi 393ead59dc Always return `scale` from resolveAssetSource
Reviewed By: @nicklockwood

Differential Revision: D2532565

fb-gh-sync-id: 113b8318a8f1a9b0dac4fab389a98ddd51d00e17
2015-10-13 06:44:16 -07:00
Alex Kotliarskyi 62d0586e59 Rely only on scriptURL when loading images
Reviewed By: @foghina

Differential Revision: D2527119

fb-gh-sync-id: e2a9618f729a2ec03b1959fa13fae46620cc379e
2015-10-12 11:36:26 -07:00
Nick Lockwood 799168929c Unify XCAsset handling logic
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
2015-10-12 04:15:27 -07:00
Ben Alpert ab6f375c66 Log React warnings internally, fix warnings in Android tests
Reviewed By: @javache

Differential Revision: D2517993

fb-gh-sync-id: c91a42a0abe4037b72c4497a5dc8b52a922fbf98
2015-10-09 09:33:24 -07:00
Pieter De Baets 67a69906e7 Allow image extensions when loading from asset catalogs
Reviewed By: @nicklockwood

Differential Revision: D2526258

fb-gh-sync-id: 01ccbddcfe8dc98ae5eeac1a066fbc1e69d6f087
2015-10-09 07:55:26 -07:00
Nick Lockwood 91e6c98ecd Implemented inline image support for <Text>
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
2015-10-08 11:56:25 -07:00
Dral 95a4f441e0 Silently (warning) fail when <Image> source has empty uri
Summary: fixes #3127
Closes https://github.com/facebook/react-native/pull/3185

Reviewed By: @​svcscm

Differential Revision: D2507588

Pulled By: @nicklockwood
2015-10-05 04:08:24 -07:00
Justin Spahr-Summers a4ef7abebb Wait to clear RCTImageView.image until definitively removed from window
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
2015-09-30 09:40:30 -07:00
Pieter De Baets 9076b71ac3 Use bundleForClass instead of mainBundle to find resources
Reviewed By: @jspahrsummers

Differential Revision: D2485109
2015-09-29 10:36:23 -07:00
Alex Kotliarskyi f07dd70051 Managed assets support for RCTConvert
Reviewed By: @nicklockwood

Differential Revision: D2443130
2015-09-29 09:21:39 -07:00
Justin Spahr-Summers 3bbfab545a Log when RCTImageView reloads and when assets are scaled
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
2015-09-25 02:29:25 -07:00
Alex Kotliarskyi 390649ab4e Support tintColor for managed image assets
Reviewed By: @nicklockwood

Differential Revision: D2443089
2015-09-23 19:29:30 -07:00
Justin Spahr-Summers bcd2ef5dfc Improve RCTImageView resizing logic
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
2015-09-23 07:32:30 -07:00
Justin Spahr-Summers de85bcab0b Cancel previous calls to -[RCTImageView reloadImage] to prevent extra work
Reviewed By: @tadeuzagallo

Differential Revision: D2470902
2015-09-23 07:32:23 -07:00
Christoph Pojer fa01b2e4cb Codemod tests to use top-level-requires
Reviewed By: @DmitrySoshnikov

Differential Revision: D2456250
2015-09-19 15:41:29 -07:00
Martin Konicek 42eb5464fd Release React Native for Android
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.
2015-09-14 18:13:39 +01:00
Alex Kotliarskyi ce47e56b7b Attach platform to asset url
Summary: Depends on D2420548

Reviewed By: @martinbigio

Differential Revision: D2421696
2015-09-09 11:25:26 -07:00
Nick Lockwood 56d25bbbdd Moved CameraRoll-related classes into CameraRoll folder instead of Image
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.
2015-09-08 09:48:19 -08:00
Spencer Ahrens 1f6f60582d [RN] Prevent reloading library photos on every animation frame 2015-09-06 17:16:10 -08: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 8187d1f0ec Update image loader plugins 2015-09-03 06:06:19 -08:00
Oliver (Cunpu) Bo f28255ea3e Support "file://" in RCTImageLoader 2015-09-02 16:37:33 -08:00
Alex Akers 36444a65c7 Add pluggable image processing system 2015-09-02 08:31:34 -08:00
Nick Lockwood 848839858b Added mechanism for directly mapping JS event handlers to blocks
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).
2015-09-02 06:11:24 -08:00
Alex Kotliarskyi 5b25f208c5 [ReactNative] Teach flow how to deal with images 2015-08-26 18:26:09 -08:00
Nick Lockwood 88e0bbc469 Ran Convert > To Modern Objective C Syntax 2015-08-25 01:08:49 -08:00
Christopher Chedeau 16ddb1962a [ReactNative] Remove warning for <Image source={require('./image.jpg')} />
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.
2015-08-19 22:53:25 -07:00
Nick Lockwood 8d1e02b8bd Convert alloc/init to new to please linter 2015-08-17 08:46:00 -07:00
Nick Lockwood 7232b1bbc7 Fixed image clipping / resizing logic 2015-08-13 08:13:55 -08:00
Adam Roth 57a6a02dff [CameraRoll] Image orientation fix for #1845
Summary:
PR for #1845

Use ALAssetOrientationUp for image orientation.

Originally committed at b34a85f4da
Closes https://github.com/facebook/react-native/pull/2214
Github Author: Adam Roth <adamjroth@gmail.com>
2015-08-11 08:44:57 -08:00
Nick Lockwood 48af214216 Simplified event registration
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.
2015-08-11 06:41:04 -08:00
Yusef Napora 2fe1ac2a83 [Image] Fix invalid CGContext when one dimension of destination Image size == 0
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>
2015-08-11 06:30:34 -08:00
Tom Hastjarjanto 2424a215e0 [Image] Fix default Image functionality
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>
2015-08-11 05:19:04 -08:00
Nick Lockwood f165bbaf4e Use +[RCTConvert NSURL:] everywhere instead of +[NSURL URLWithString:]
Summary:
RCTConvert's URL: method gracefully handles unescaped urls, local file urls, urls containing unicode, etc. URLWithString doesn't.
2015-08-04 16:26:16 -08:00
Alex Akers bb883bfb61 Update offscreen image fix with window checking
Summary:
2015-08-04 08:05:12 -08:00
Philipp von Weitershausen 37636fc59a [React Native] open source ImageEditingManager native module 2015-07-29 15:57:48 -08:00
Nick Lockwood 1d852624fd Refactored RCTImageDownloader to use RCTNetworking instead of a separate download system 2015-07-27 13:47:52 -08:00
Christopher Chedeau 18e6094cab [ReactNative] Add overflow to the whitelisted Image props
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.
2015-07-27 11:06:27 -08:00
Nick Lockwood 09bb761b25 Fixed RCTDownloadTaskWrapper crash on iOS7
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.
2015-07-27 09:02:38 -08:00
Nick Lockwood 2c5290946b Converted RCTImageLoader to be a bridge module 2015-07-27 08:52:20 -08:00
Spencer Ahrens f1bd1cbc94 [ReactNative] cleanup native components 2015-07-24 18:54:35 -08:00
Nick Lockwood ef5cec4f08 Text highlighting on iOS
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.
2015-07-24 08:41:58 -08:00
Martin Konicek 7c87952e43 [ReactNative] Image docs
Summary:
In preparation for open sourcing React Native for Android, document which Image props are platform-specific.
2015-07-24 06:21:49 -08:00
Alex Akers 98ab7581a5 Remove images from offscreen image views 2015-07-21 09:02:28 -08:00
Nick Lockwood 85cb35c514 Fixed rotation and scaling issues when loading ALAssets using RCTImageLoader 2015-07-21 05:32:49 -08:00
Adam Roth 9c73e2ff7a [Image] Improved loading of Assets Library and Photos Framework images.
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>
2015-07-21 05:32:48 -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
Dmitriy Loktev 74f8055692 [Image] Add examples to UIExplorer, fix some bugs
Summary:
Add two simple examples.
![image](https://cloud.githubusercontent.com/assets/1004115/8674092/03052652-2a55-11e5-8531-8f01c7970af4.png)

Also:
- do not start the task at DownloadTaskWrapper (it starts from ImageDowloader if image isn't cached yet);
- fire `onLoadAbor`t event;
- send more readable `error.localizedDescription` with `onLoadError`;
- rename `onLoaded` to `onLoadEnd`
Closes https://github.com/facebook/react-native/pull/1987
Github Author: Dmitriy Loktev <unknownliveid@hotmail.com>
2015-07-14 14:33:02 -08:00
Nick Lockwood d1a82c4af1 Fixed image downloader bug
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.
2015-07-14 13:04:34 -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
James Ide d5943b0e47 [Image] Add support for tintColor to remote images
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>
2015-07-13 10:36:32 -08:00
Nick Lockwood 01151f8c7a Added LRU cache to fix out of memory issues with color caching 2015-07-13 08:50:00 -08:00
Alexsander Akers ea959af850 [React Native] Fix test failures 2015-07-10 06:56:50 -08:00
Alexsander Akers 72b50dc32d [React Native] Update image downloader
Summary:
Change `RCTImageDownloader` so it stores the `RCTDownloadTaskWrapper` for reuse. Modify `RCTDownloadTaskWrapper` to use associated objects to store the completion/progress blocks.
2015-07-10 06:34:22 -08:00
Dmitriy Loktev 8e70c7f003 [Image] Add onLoadStart, onLoadProgress, onLoadError events to Image component
Summary:
This PR adds 4 native events to NetworkImage.

![demo](http://zippy.gfycat.com/MelodicLawfulCaecilian.gif)

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>
2015-07-10 06:34:21 -08:00
Alex Akers 3c541ca540 [React Native] Update native error callback handling
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.
2015-07-07 08:54:05 -08:00
Alex Akers aba148061f [React Native] Re-alphabetize file names in Xcode projects
Summary:
Fixes my OCD problems.
2015-07-06 01:57:06 -08:00
James Ide 3441847aa1 [Crashfix] Ensure that the image response is non-nil before caching it
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>
2015-07-03 02:01:20 -08:00
Alex Akers 454b5f3c0b [React Native] Replace RCTCache with NSURLCache 2015-06-29 05:26:35 -08:00