147 lines
3.7 KiB
JavaScript
147 lines
3.7 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {
|
|
Platform,
|
|
View,
|
|
Image,
|
|
NativeModules,
|
|
requireNativeComponent,
|
|
ViewPropTypes,
|
|
StyleSheet,
|
|
} from 'react-native'
|
|
|
|
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource')
|
|
|
|
const FastImageViewNativeModule = NativeModules.FastImageView
|
|
|
|
const useLocalImage = source => {
|
|
// No source.
|
|
if (!source) return true
|
|
// No uri.
|
|
if (!source.uri) return true
|
|
// Is a local Android image.
|
|
if (source.uri.startsWith('file://')) return true
|
|
// Content URI.
|
|
if (source.uri.startsWith('content://')) return true
|
|
// Smart album.
|
|
if (source.uri.startsWith('photos://')) return true
|
|
// From asset library / camera roll.
|
|
if (source.uri.startsWith('assets-library://')) return true
|
|
// We have a remote source.
|
|
return false
|
|
}
|
|
|
|
class FastImage extends Component {
|
|
setNativeProps(nativeProps) {
|
|
this._root.setNativeProps(nativeProps)
|
|
}
|
|
|
|
captureRef = e => (this._root = e)
|
|
|
|
render() {
|
|
const {
|
|
source,
|
|
onLoadStart,
|
|
onProgress,
|
|
onLoad,
|
|
onError,
|
|
onLoadEnd,
|
|
style,
|
|
children,
|
|
...props
|
|
} = this.props
|
|
|
|
// If there's no source or source uri just fallback to Image.
|
|
if (useLocalImage(source)) {
|
|
return (
|
|
<Image
|
|
ref={this.captureRef}
|
|
{...props}
|
|
style={style}
|
|
source={source}
|
|
onLoadStart={onLoadStart}
|
|
onProgress={onProgress}
|
|
onLoad={onLoad}
|
|
onError={onError}
|
|
onLoadEnd={onLoadEnd}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const resolvedSource = resolveAssetSource(source)
|
|
|
|
return (
|
|
<View style={[style, styles.imageContainer]} ref={this.captureRef}>
|
|
<FastImageView
|
|
{...props}
|
|
style={StyleSheet.absoluteFill}
|
|
source={resolvedSource}
|
|
onFastImageLoadStart={onLoadStart}
|
|
onFastImageProgress={onProgress}
|
|
onFastImageLoad={onLoad}
|
|
onFastImageError={onError}
|
|
onFastImageLoadEnd={onLoadEnd}
|
|
/>
|
|
{children && (
|
|
<View style={StyleSheet.absoluteFill}>{children}</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
imageContainer: {
|
|
overflow: 'hidden',
|
|
},
|
|
})
|
|
|
|
FastImage.resizeMode = {
|
|
contain: 'contain',
|
|
cover: 'cover',
|
|
stretch: 'stretch',
|
|
center: 'center',
|
|
}
|
|
|
|
FastImage.priority = {
|
|
low: 'low',
|
|
normal: 'normal',
|
|
high: 'high',
|
|
}
|
|
|
|
FastImage.preload = sources => {
|
|
FastImageViewNativeModule.preload(sources)
|
|
}
|
|
|
|
FastImage.defaultProps = {
|
|
resizeMode: FastImage.resizeMode.cover,
|
|
}
|
|
|
|
const FastImageSourcePropType = PropTypes.shape({
|
|
uri: PropTypes.string,
|
|
headers: PropTypes.objectOf(PropTypes.string),
|
|
priority: PropTypes.oneOf(Object.keys(FastImage.priority)),
|
|
})
|
|
|
|
FastImage.propTypes = {
|
|
...ViewPropTypes,
|
|
source: PropTypes.oneOfType([FastImageSourcePropType, PropTypes.number]),
|
|
onLoadStart: PropTypes.func,
|
|
onProgress: PropTypes.func,
|
|
onLoad: PropTypes.func,
|
|
onError: PropTypes.func,
|
|
onLoadEnd: PropTypes.func,
|
|
}
|
|
|
|
const FastImageView = requireNativeComponent('FastImageView', FastImage, {
|
|
nativeOnly: {
|
|
onFastImageLoadStart: true,
|
|
onFastImageProgress: true,
|
|
onFastImageLoad: true,
|
|
onFastImageError: true,
|
|
onFastImageLoadEnd: true,
|
|
},
|
|
})
|
|
|
|
export default FastImage
|