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