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:
parent
58add0ed3c
commit
2b4fba3ad8
32
src/index.js
32
src/index.js
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue