Skip to content

Commit 2b4fba3

Browse files
authored
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
1 parent 58add0e commit 2b4fba3

File tree

1 file changed

+13
-19
lines changed

1 file changed

+13
-19
lines changed

src/index.js

+13-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react'
1+
import React, { forwardRef } from 'react'
22
import PropTypes from 'prop-types'
33
import {
44
View,
@@ -11,15 +11,9 @@ import {
1111

1212
const FastImageViewNativeModule = NativeModules.FastImageView
1313

14-
class FastImage extends Component {
15-
setNativeProps(nativeProps) {
16-
this._root.setNativeProps(nativeProps)
17-
}
18-
19-
captureRef = e => (this._root = e)
20-
21-
render() {
22-
const {
14+
const FastImage = forwardRef(
15+
(
16+
{
2317
source,
2418
onLoadStart,
2519
onProgress,
@@ -30,16 +24,14 @@ class FastImage extends Component {
3024
children,
3125
fallback,
3226
...props
33-
} = this.props
34-
27+
},
28+
ref,
29+
) => {
3530
const resolvedSource = Image.resolveAssetSource(source)
3631

3732
if (fallback) {
3833
return (
39-
<View
40-
style={[styles.imageContainer, style]}
41-
ref={this.captureRef}
42-
>
34+
<View style={[styles.imageContainer, style]} ref={ref}>
4335
<Image
4436
{...props}
4537
style={StyleSheet.absoluteFill}
@@ -56,7 +48,7 @@ class FastImage extends Component {
5648
}
5749

5850
return (
59-
<View style={[styles.imageContainer, style]} ref={this.captureRef}>
51+
<View style={[styles.imageContainer, style]} ref={ref}>
6052
<FastImageView
6153
{...props}
6254
style={StyleSheet.absoluteFill}
@@ -70,8 +62,10 @@ class FastImage extends Component {
7062
{children}
7163
</View>
7264
)
73-
}
74-
}
65+
},
66+
)
67+
68+
FastImage.displayName = 'FastImage'
7569

7670
const styles = StyleSheet.create({
7771
imageContainer: {

0 commit comments

Comments
 (0)