react-native/Libraries/Image/RCTNetworkImageView.h

47 lines
1.6 KiB
C
Raw Normal View History

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
2015-01-29 17:10:49 -08:00
#import <UIKit/UIKit.h>
[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-09 15:48:22 -01:00
@class RCTEventDispatcher;
2015-01-29 17:10:49 -08:00
@class RCTImageDownloader;
@interface RCTNetworkImageView : UIView
[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-09 15:48:22 -01:00
- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
imageDownloader:(RCTImageDownloader *)imageDownloader NS_DESIGNATED_INITIALIZER;
2015-01-29 17:10:49 -08:00
/**
* An image that will appear while the view is loading the image from the network,
* or when imageURL is nil. Defaults to nil.
*/
@property (nonatomic, strong) UIImage *defaultImage;
/**
* Specify a URL for an image. The image will be asynchronously loaded and displayed.
*/
@property (nonatomic, strong) NSURL *imageURL;
/**
* Whether the image should be masked with this view's tint color.
*/
@property (nonatomic, assign) BOOL tinted;
2015-01-29 17:10:49 -08:00
/**
* By default, changing imageURL will reset whatever existing image was present
* and revert to defaultImage while the new image loads. In certain obscure cases you
* may want to disable this behavior and instead keep displaying the previous image
* while the new one loads. In this case, pass NO for resetToDefaultImageWhileLoading.
* (If you set imageURL to nil, however, resetToDefaultImageWhileLoading is ignored;
* that will always reset to the default image.)
*/
- (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)reset;
@end