react-native-fast-image/FastImage.js

110 lines
2.3 KiB
JavaScript

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
Image,
NativeModules,
requireNativeComponent,
View,
} from 'react-native'
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource')
const FastImageViewNativeModule = NativeModules.FastImageView
class FastImage extends Component {
setNativeProps(nativeProps) {
this._root.setNativeProps(nativeProps)
}
render() {
const {
source,
onLoadStart,
onProgress,
onLoad,
onError,
onLoadEnd,
...props
} = this.props
// If there's no source or source uri just fallback to Image.
if (!source || !source.uri) {
return (
<Image
ref={e => (this._root = e)}
{...props}
source={source}
onLoadStart={onLoadStart}
onProgress={onProgress}
onLoad={onLoad}
onError={onError}
onLoadEnd={onLoadEnd}
/>
)
}
const resolvedSource = resolveAssetSource(source)
return (
<FastImageView
ref={e => (this._root = e)}
{...props}
source={resolvedSource}
onFastImageLoadStart={onLoadStart}
onFastImageProgress={onProgress}
onFastImageLoad={onLoad}
onFastImageError={onError}
onFastImageLoadEnd={onLoadEnd}
/>
)
}
}
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 = {
...View.propTypes,
source: FastImageSourcePropType,
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