status-im
/
react-native-fast-image
mirror of https://github.com/status-im/react-native-fast-image.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add progress events for iOS.

This commit is contained in:
Dylan Vann 2017-07-03 21:58:24 -04:00
parent 02fd00c4a6
commit ad4d8a5fe6
5 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
FastImage.js
View File

@ -1,4 +1,6 @@
import React, { PropTypes, Component } from 'react'
import React, {
Component,
} from 'react'
import {
requireNativeComponent,
Image,
@ -16,7 +18,13 @@ class FastImage extends Component {
}
render() {
const { source, onError, onLoad, ...props } = this.props
const {
source,
onError,
onLoad,
onProgress,
...props
} = this.props
// If there's no source or source uri just fallback to Image.
if (!source || !source.uri) {
@ -25,6 +33,7 @@ class FastImage extends Component {
ref={e => (this._root = e)}
{...props}
source={source}
onProgress={onProgress}
onError={onError}
onLoad={onLoad}
/>
@ -37,6 +46,7 @@ class FastImage extends Component {
ref={e => (this._root = e)}
{...props}
source={resolvedSource}
onFastImageProgress={onProgress}
onFastImageError={onError}
onFastImageLoad={onLoad}
/>
@ -70,18 +80,24 @@ const FastImageSourcePropType = PropTypes.shape({
FastImage.propTypes = {
...View.propTypes,
source: FastImageSourcePropType,
onFastImageProgress: PropTypes.func,
onFastImageError: PropTypes.func,
onFastImageLoad: PropTypes.func,
}
FastImage.defaultProps = {
resizeMode: FastImage.resizeMode.cover,
onProgress: Function.prototype,
onLoad: Function.prototype,
onError: Function.prototype,
}
const FastImageView = requireNativeComponent('FastImageView', FastImage, {
nativeOnly: { onFastImageError: true, onFastImageLoad: true },
nativeOnly: {
onFastImageProgress: true,
onFastImageError: true,
onFastImageLoad: true
},
})
export default FastImage

16
example/FastImageExample.js
View File

@ -1,6 +1,13 @@
// @flow
import React, { Component } from 'react'
import { View, Text, StyleSheet, ScrollView, StatusBar } from 'react-native'
import {
PixelRatio,
ScrollView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import FastImage from 'react-native-fast-image'
import timeout from 'react-timeout'
@ -10,6 +17,8 @@ const getImageUrl = (id, width, height) =>
`https://source.unsplash.com/${id}/${width}x${height}`
const IMAGE_SIZE = 150
const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
// The server is used to test that sending headers is working correctly.
const USE_SERVER = false
const TOKEN = 'someToken'
@ -24,8 +33,8 @@ const getImages = () => {
]
}
return [
getImageUrl('x58soEovG_M', IMAGE_SIZE, IMAGE_SIZE),
getImageUrl('yPI7myL5eWY', IMAGE_SIZE, IMAGE_SIZE),
getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
]
}
@ -81,6 +90,7 @@ class FastImageExample extends Component {
},
priority: FastImage.priority.low,
}}
onProgress={e => console.log('progress', e.nativeEvent.progress)}
/>
<FastImage
style={styles.image}

10
ios/FastImage/FFFastImageView.h
View File

@ -11,9 +11,11 @@
@interface FFFastImageView : FLAnimatedImageView
@property(nonatomic, copy) RCTDirectEventBlock onFastImageError;
@property(nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
@property(nonatomic, assign) RCTResizeMode resizeMode;
@property(nonatomic, strong) FFFastImageSource *source;
@property (nonatomic, copy) RCTBubblingEventBlock onFastImageProgress;
@property (nonatomic, copy) RCTDirectEventBlock onFastImageError;
@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
@property (nonatomic, assign) RCTResizeMode resizeMode;
@property (nonatomic, strong) FFFastImageSource *source;
@end

35
ios/FastImage/FFFastImageView.m
View File

@ -37,21 +37,28 @@
[self sd_setImageWithURL:source.uri
placeholderImage:nil
options:options
completed:^(UIImage *image,
NSError *error,
SDImageCacheType cacheType,
NSURL *imageURL) {
if (error) {
if (_onFastImageError) {
_onFastImageError(@{});
}
} else {
if (_onFastImageLoad) {
_onFastImageLoad(@{});
}
}
}];
progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
double progress = MIN(1, MAX(0, (double) receivedSize / (double) expectedSize));
if (_onFastImageProgress) {
_onFastImageProgress(@{ @"progress": @(progress) });
}
} completed:^(UIImage * _Nullable image,
NSError * _Nullable error,
SDImageCacheType cacheType,
NSURL * _Nullable imageURL) {
if (error) {
if (_onFastImageError) {
_onFastImageError(@{});
}
} else {
if (_onFastImageLoad) {
_onFastImageLoad(@{});
}
}
}];
}
}
@end

9
ios/FastImage/FFFastImageViewManager.m
View File

@ -14,10 +14,11 @@ RCT_EXPORT_MODULE(FastImageView)
return view;
}
RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource);
RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode);
RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock);
RCT_EXPORT_VIEW_PROPERTY(source, FFFastImageSource)
RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock)
RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources)
{