Commit Graph

53 Commits

Author SHA1 Message Date
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
nak411 e70789117c Fixed typo in comments
Summary:
Fixed spelling error in comments.

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Help fix typo in comments.

Did not make any code changes

[DOCS][MINOR][RCTImageView.m] Typo fixes in comments
<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAl  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/16560

Differential Revision: D6173389

Pulled By: shergin

fbshipit-source-id: f3fd8ea686a882f1543922655498dcc7210d8cb8
2017-10-27 11:05:02 -07:00
Valentin Shergin a32e1cfffb Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS
Differential Revision: D5189017

fbshipit-source-id: 35901e0b5c289cb7ae5b4fe8b13f3da3e43e819f
2017-10-25 08:20:48 -07:00
Valentin Shergin e118d7a656 Revert D5196055: [RN] Intrinsic content size for network image sources of <Image>
Differential Revision: D5196055

fbshipit-source-id: 2122029518dc6f7d1612d31b0ecfa3dd2f0dea7d
2017-10-25 08:20:48 -07:00
Valentin Shergin f3a32895ca Intrinsic content size for network image sources of <Image>
Summary:
It makes possible to just specify remote url for the <Image> and it will work.
`<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />`

Reviewed By: javache

Differential Revision: D5196055

fbshipit-source-id: aaf139c4518cc35d1f4cf810bbf0305aad73a55b
2017-10-23 20:00:12 -07:00
Valentin Shergin 7bd0855650 Native implementation of <Image> intrinsic content size on iOS
Summary:
Now intrinsic content size of <Image> is implemented natively on iOS and now it is actually
`intrinsicContentSize`, not just overrided `height` and `width` styles (which was incorrect and hacky).
This change also removes support of nested content inside <Image>.
This is a first commit in the row where we improve <Image> implementation.

Reviewed By: mmmulani

Differential Revision: D5189017

fbshipit-source-id: eab3defa3d86a5d4219b4f4925ab7460b58d760f
2017-10-23 20:00:12 -07:00
Pieter De Baets 7542f3d659 Call reloadImage less often when setting Image props
Summary: Came across multiple calls to reload while we we're setting properties on the image. During the initial setup they should no-op pretty quickly, but this should avoid us making multiple requests when changing an image that's already visible.

Reviewed By: mmmulani

Differential Revision: D5536014

fbshipit-source-id: 3c2abb83cbb66f9d8928f20fc7f461562f666f43
2017-08-29 04:23:04 -07:00
Shir Levkowitz ced1513b62 Pass actual loaded image size to load (iOS).
Summary:
Motivation: The JavaScript image component's onLoad callback optionally
accepts dimensions width and height, allowing the parent of the image to
obtain the native size (without an extra bridge call). It was found that
the dimensions passed into this callback on iOS are frequently (0,0),
not the true native dimensions. This change ensures that the image's
dimensions are passed to the callback. (Examination of the initializer
for RCTImageSource, + (RCTImageSource *)RCTImageSource:(id)json,
indicates that not all code paths produce a size other than CGSizeZero.)
Closes https://github.com/facebook/react-native/pull/15116

Differential Revision: D5460979

Pulled By: javache

fbshipit-source-id: 2dca03c3aae974ef70e981039aa6a804b8e128c8
2017-07-20 03:05:11 -07: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
Pieter De Baets 3efe95d989 Fix images not reloading after memory warning
Reviewed By: mmmulani

Differential Revision: D3816779

fbshipit-source-id: edccb41a38fff3b2c143ffb3cbe0a7001ee16331
2016-09-06 09:28:35 -07:00
Pieter De Baets 3fb76696bb Fix setImage clownyness
Reviewed By: mmmulani

Differential Revision: D3785608

fbshipit-source-id: eab547ae2724efde5aeb3855ab15610875d63dcd
2016-08-29 11:28:52 -07:00
Pieter De Baets 6f7898ee09 Avoid reloading images that are already the source size
Reviewed By: majak

Differential Revision: D3755114

fbshipit-source-id: 112fa6c8fe13d1070855d3e57f0009afe1b53038
2016-08-26 13:59:05 -07:00
Pieter De Baets 86fbf2386b Avoid sending out multiple requests for the same image
Reviewed By: majak

Differential Revision: D3755074

fbshipit-source-id: fea782fcb99e6b977fb52231d378aaab4685d480
2016-08-26 13:59:05 -07:00
Pieter De Baets bfa01f0d15 Rename RCTImageView source to imageSources
Reviewed By: majak

Differential Revision: D3754991

fbshipit-source-id: 9794af94b51b331df1209ae63d053dcef2cf4a97
2016-08-23 11:28:42 -07:00
Pieter De Baets 84f68c338a Send down image source to RCTImageView onLoad callback on iOS
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
2016-08-22 10:58:49 -07:00
Pieter De Baets 14188289fc Add some defensive cleanup of cancelBlock in RCTImageLoader
Reviewed By: mmmulani

Differential Revision: D3742177

fbshipit-source-id: 1cd16c2519052ec5811ecadf2530a5846b4ae1bc
2016-08-19 10:46:09 -07:00
Alexander Jarvis 7cdd4c9a75 Fix image source prop change updating image
Summary:
fixes #7795
fixes #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
2016-08-11 03:28:40 -07:00
David Goldman fd48bc3cff Implement multi-source Images on iOS
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
2016-07-28 14:13:46 -07:00
Skotch Vail bcf4bb6edd Automated changes to remove implicit capture of self in blocks: Libraries/FBReactKit/BUCK
Reviewed By: javache

Differential Revision: D3442470

fbshipit-source-id: 584a2bb3df5f7122166778b8fd44fae45560491e
2016-07-07 12:44:14 -07:00
Janic Duplessis 4c83237511 Add Image resizeMode repeat on iOS
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.
![screen shot 2016-06-07 at 3 06 17 am](https://cloud.githubusercontent.com/assets/2677334/15848755/d95d8046-2c5c-11e6-9f3d-1ce8a1c9c846.png)

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
2016-06-22 04:28:44 -07:00
Kasim Tan e334643592 Fix typo
Summary: Closes https://github.com/facebook/react-native/pull/8036

Differential Revision: D3414563

Pulled By: nicklockwood

fbshipit-source-id: a9dc541e5d76eb4c7fe65336af5b1692ace8da26
2016-06-09 16:28:24 -07:00
Nick Lockwood 235749ba19 Fix missing images
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
2016-06-09 09:58:31 -07:00
Nick Lockwood 72b363d7fc Replaced isMainThread checks with a proper test for main queue
Summary:
As per https://twitter.com/olebegemann/status/738656134731599872, our use of "main thread" to mean "main queue" seems to be unsafe.

This diff replaces the `NSThread.isMainQueue` checks with dispatch_get_specific(), which is the recommended approach.

I've also replaced all use of "MainThread" terminology with "MainQueue", and taken the opportunity to deprecate the "sync" param of `RCTExecuteOnMainThread()`, which, while we do still use it in a few places, is incredibly unsafe and shouldn't be encouraged.

Reviewed By: javache

Differential Revision: D3384910

fbshipit-source-id: ea7c216013372267b82eb25a38db5eb4cd46a089
2016-06-06 07:58:36 -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
Ben Nham 71bf8a3e48 Only clear image contents on memory warning
Summary:
Some apps are complaining about flashing images when performing navigation transitions. An example issue would be:

1. Load a master list view with many images
2. Click on an image to go to a detail view
3. Go back to the master list view

At step (3), users see a number of images flash from a placeholder image back to the final image because `-[RCTImageView didMoveToWindow]` calls `clearImage` when the image view exits the view hierarchy between (1) and (2) and calls `reloadImage` (which sets the image property asynchronously) when the image view re-enters the view hiearchy between (2) and (3).

This diff fixes the issue by being less aggressive about clearing image contents. It only clears image contents when the app receives a memory warning or the app goes into the background.

For comparison, CKNetworkImageComponent in ComponentKit doesn't have this purging behavior at all.

Reviewed By: javache

Differential Revision: D3325009

fbshipit-source-id: efca10099cdfdb49afbb3f550854d4b8a40511d0
2016-05-24 08:43:23 -07:00
Ben Nham 5bb5ea7135 Reload image without dispatch_async if completion handler is already on main thread
Summary:
This works with D3305161 to minimize image flashing. After D3305161, the completion handler passed to `-[RCTImageLoader loadImageWithoutClipping:size:scale:resizeMode:progressBlock:completionBlock:]` may be called back on the main queue in the case of a cached image. In this case, we want to set the image view's image property synchronously rather than on the next runloop iteration via dispatch_async. This minimizes the amount of image flashing the user sees when displaying a cached image.

The exception to this case is for blurred images. A blur can be an expensive (taking multiple ms on the CPU), so we always make sure to perform the blur off the main queue even if the image is cached and the callback came back on the main queue.

Reviewed By: nicklockwood

Differential Revision: D3310176

fbshipit-source-id: 6820782527b65e4956879cf06e8ed2c09c622a58
2016-05-17 10:43:30 -07:00
Reem Helou 9cb3ec9424 Add blur effect to RCTImageView
Summary: This diff introduces a blur radius property to the Image component on ios. If the radius specified is greater then 0 then native will apply a blur filter to the image

Reviewed By: nicklockwood

Differential Revision: D3054671

fb-gh-sync-id: d7a81ce5a08a3a2091c583f5053c6a86638b21b2
shipit-source-id: d7a81ce5a08a3a2091c583f5053c6a86638b21b2
2016-03-17 12:25:40 -07: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 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
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
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 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
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
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
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
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 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
Nick Lockwood 88e0bbc469 Ran Convert > To Modern Objective C Syntax 2015-08-25 01:08:49 -08:00
Nick Lockwood 7232b1bbc7 Fixed image clipping / resizing logic 2015-08-13 08:13:55 -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
Alex Akers bb883bfb61 Update offscreen image fix with window checking
Summary:
2015-08-04 08:05:12 -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