Commit Graph

104 Commits

Author SHA1 Message Date
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
Eric Vicenti 47508566a0 [ReactNative] resizeMode is not a nativeOnly prop
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
2015-06-23 08:57:47 -08:00
David Mohl 90aad9a610 Add support for selecting media from library
Summary:
This PR adds support for UIImagePickerController to allow selecting a photo / video from the users camera roll.

![ios simulator screen shot jun 14 2015 4 50 03 pm](https://cloud.githubusercontent.com/assets/688326/8147758/ae6dc8d4-12b6-11e5-80f0-2bcaa964a5d8.png)

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.
2015-06-22 03:09:16 -08:00
Nick Lockwood 650fc9de4c Increased warning levels to -Wall -Wextra, and fixed Xcode 7 beta issues
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.
2015-06-15 07:52:50 -08:00
Nick Lockwood 2ee8410a71 Removed nullability attributes until Infer supports them 2015-06-11 10:39:29 -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
Nick Lockwood 45d8fb0ef6 Removed deprecated RCT_EXPORT + code paths 2015-06-05 09:58:25 -08:00
Tadeu Zagallo 1a564eed77 [ReactNative] Run UIExplorer tests on sandcastle 2015-06-05 05:36:06 -08:00
Andy Street 435125f4a0 Revert "[ReactNative] Run UIExplorer tests on sandcastle" 2015-06-03 10:57:19 -08:00
Tadeu Zagallo e1454c29c5 [ReactNative] Run UIExplorer tests on sandcastle 2015-06-03 06:24:12 -08:00
Joshua Sierles 43adb7b02c [CameraRoll] support fetching videos from the camera roll
Summary:
This adds a parameter for fetching videos from the camera roll. It also changes the default to fetch both videos and photos.
Closes https://github.com/facebook/react-native/pull/774
Github Author: Joshua Sierles <joshua@diluvia.net>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-01 15:57:32 -08:00
Alex Kotliarskyi d723e17629 [ReactNative] Copy assets to corresponding folders on Android 2015-06-01 12:21:53 -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