feat: Use forwardRef to allow access to ref.measure and others. (#419)

This uses forwardRef to allow access to the View that wraps the native FastImage component.

closes #69
This commit is contained in:
Dylan Vann 2019-02-25 01:40:39 -05:00 committed by GitHub
parent 58add0ed3c
commit 2b4fba3ad8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 19 deletions

View File

@ -1,4 +1,4 @@
import React, { Component } from 'react' import React, { forwardRef } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { import {
View, View,
@ -11,15 +11,9 @@ import {
const FastImageViewNativeModule = NativeModules.FastImageView const FastImageViewNativeModule = NativeModules.FastImageView
class FastImage extends Component { const FastImage = forwardRef(
setNativeProps(nativeProps) { (
this._root.setNativeProps(nativeProps) {
}
captureRef = e => (this._root = e)
render() {
const {
source, source,
onLoadStart, onLoadStart,
onProgress, onProgress,
@ -30,16 +24,14 @@ class FastImage extends Component {
children, children,
fallback, fallback,
...props ...props
} = this.props },
ref,
) => {
const resolvedSource = Image.resolveAssetSource(source) const resolvedSource = Image.resolveAssetSource(source)
if (fallback) { if (fallback) {
return ( return (
<View <View style={[styles.imageContainer, style]} ref={ref}>
style={[styles.imageContainer, style]}
ref={this.captureRef}
>
<Image <Image
{...props} {...props}
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
@ -56,7 +48,7 @@ class FastImage extends Component {
} }
return ( return (
<View style={[styles.imageContainer, style]} ref={this.captureRef}> <View style={[styles.imageContainer, style]} ref={ref}>
<FastImageView <FastImageView
{...props} {...props}
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
@ -70,8 +62,10 @@ class FastImage extends Component {
{children} {children}
</View> </View>
) )
} },
} )
FastImage.displayName = 'FastImage'
const styles = StyleSheet.create({ const styles = StyleSheet.create({
imageContainer: { imageContainer: {