feat: Use forwardRef to allow access to ref.measure and others.

This uses forwardRef to allow access to the View that wraps the native FastImage component. closes #69
DylanVann · Feb 25, 2019 · d345850 · d345850
1 parent 1ae24fc
commit d345850
Showing 1 changed file with 14 additions and 20 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import {
     View,
@@ -11,15 +11,9 @@ import {
 
 const FastImageViewNativeModule = NativeModules.FastImageView
 
-class FastImage extends Component {
-    setNativeProps(nativeProps) {
-        this._root.setNativeProps(nativeProps)
-    }
-
-    captureRef = e => (this._root = e)
-
-    render() {
-        const {
+const FastImage = forwardRef(
+    (
+        {
             source,
             onLoadStart,
             onProgress,
@@ -30,17 +24,15 @@ class FastImage extends Component {
             children,
             fallback,
             ...props
-        } = this.props
-
+        },
+        ref,
+    ) => {
         const resolvedSource = Image.resolveAssetSource(source)
 
         if (fallback) {
             return (
-                <View
-                    style={[styles.imageContainer, style]}
-                    ref={this.captureRef}
-                >
-                    <FastImageView
+                <View style={[styles.imageContainer, style]} ref={ref}>
+                    <FastImage
                         {...props}
                         style={StyleSheet.absoluteFill}
                         source={resolvedSource}
@@ -56,7 +48,7 @@ class FastImage extends Component {
         }
 
         return (
-            <View style={[styles.imageContainer, style]} ref={this.captureRef}>
+            <View style={[styles.imageContainer, style]} ref={ref}>
                 <FastImageView
                     {...props}
                     style={StyleSheet.absoluteFill}
@@ -70,8 +62,10 @@ class FastImage extends Component {
                 {children}
             </View>
         )
-    }
-}
+    },
+)
+
+FastImage.displayName = 'FastImage'
 
 const styles = StyleSheet.create({
     imageContainer: {