Merge pull request pmndrs#185 from psachs21/forward-refs

Feature: Add ref forwarding to animated components

.size-snapshot.json

@@ -5,8 +5,8 @@
     "gzipped": 2150
   },
   "dist/web.umd.js": {
-    "bundled": 89751,
-    "minified": 36155,
-    "gzipped": 12303
+    "bundled": 88718,
+    "minified": 35816,
+    "gzipped": 12184
   }
 }

src/animated/createAnimatedComponent.js

@@ -3,7 +3,7 @@ import AnimatedProps from './AnimatedProps'
 import * as Globals from './Globals'
 
 export default function createAnimatedComponent(Component) {
-  return class AnimatedComponent extends React.Component {
+  class AnimatedComponent extends React.Component {
     static propTypes = {
       style(props, propName, componentName) {
         if (!Component.propTypes) return
@@ -61,8 +61,21 @@ export default function createAnimatedComponent(Component) {
     }
 
     render() {
-      const props = this._propsAnimated.__getValue()
-      return <Component {...props} ref={node => (this.node = node)} />
+      const { forwardedRef, ...rest } = this._propsAnimated.__getValue()
+      return (
+        <Component
+          {...rest}
+          ref={node => {
+            this.node = node
+            if (forwardedRef) {
+              forwardedRef(node)
+            }
+          }}
+        />
+      )
     }
   }
+  return React.forwardRef((props, ref) => {
+    return <AnimatedComponent {...props} forwardedRef={ref} />
+  })
 }

tests/test.js

@@ -8,6 +8,8 @@ let tree
 class Test extends React.Component {
   count = 0
   state = { resolve: undefined, props: {}, result: undefined }
+  ref = null
+
   render() {
     let { resolve, props, result } = this.state
     return resolve ? (
@@ -36,12 +38,15 @@ class Test extends React.Component {
             tree.update()
             result = result || props.to
             expect(tree.find('div').get(0).props.style).toMatchObject(result)
+            console.log(this.ref)
             resolve()
           })
         }>
         {props.native
-          ? styles => <animated.div style={styles} />
-          : styles => <div style={styles} />}
+          ? styles => (
+              <animated.div style={styles} ref={node => (this.ref = node)} />
+            )
+          : styles => <div style={styles} ref={node => (this.ref = node)} />}
       </Spring>
     ) : null
   }