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

perf: Use React.memo for FastImage. (#449)

This commit is contained in:
Dylan Vann 2019-04-20 21:53:00 -04:00 committed by GitHub
parent 89c0e2e9ac
commit 5c2b4afa41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/index.js
View File

@ -1,4 +1,4 @@
import React, { forwardRef } from 'react'
import React, { forwardRef, memo } from 'react'
import PropTypes from 'prop-types'
import {
View,
@ -11,59 +11,61 @@ import {
const FastImageViewNativeModule = NativeModules.FastImageView
const FastImage = forwardRef(
(
{
source,
onLoadStart,
onProgress,
onLoad,
onError,
onLoadEnd,
style,
children,
fallback,
...props
},
ref,
) => {
const resolvedSource = Image.resolveAssetSource(source)
if (fallback) {
return (
<View style={[styles.imageContainer, style]} ref={ref}>
<Image
{...props}
style={StyleSheet.absoluteFill}
source={resolvedSource}
onLoadStart={onLoadStart}
onProgress={onProgress}
onLoad={onLoad}
onError={onError}
onLoadEnd={onLoadEnd}
/>
{children}
</View>
)
}
function FastImageBase({
source,
onLoadStart,
onProgress,
onLoad,
onError,
onLoadEnd,
style,
children,
fallback,
forwardedRef,
...props
}) {
const resolvedSource = Image.resolveAssetSource(source)
if (fallback) {
return (
<View style={[styles.imageContainer, style]} ref={ref}>
<FastImageView
<View style={[styles.imageContainer, style]} ref={forwardedRef}>
<Image
{...props}
style={StyleSheet.absoluteFill}
source={resolvedSource}
onFastImageLoadStart={onLoadStart}
onFastImageProgress={onProgress}
onFastImageLoad={onLoad}
onFastImageError={onError}
onFastImageLoadEnd={onLoadEnd}
onLoadStart={onLoadStart}
onProgress={onProgress}
onLoad={onLoad}
onError={onError}
onLoadEnd={onLoadEnd}
/>
{children}
</View>
)
},
)
}
return (
<View style={[styles.imageContainer, style]} ref={forwardedRef}>
<FastImageView
{...props}
style={StyleSheet.absoluteFill}
source={resolvedSource}
onFastImageLoadStart={onLoadStart}
onFastImageProgress={onProgress}
onFastImageLoad={onLoad}
onFastImageError={onError}
onFastImageLoadEnd={onLoadEnd}
/>
{children}
</View>
)
}
const FastImageMemo = memo(FastImageBase)
const FastImage = forwardRef((props, ref) => (
<FastImageMemo forwardedRef={ref} {...props} />
))
FastImage.displayName = 'FastImage'