react-spring: Interpolation doesn't work with useChain hooks API

🐛 Bug Report

When using the useChain hooks API, interpolation doesn’t work.

To Reproduce

I have a relatively simple animation that I want to run sequentially using the useChain API. I have just converted my wrapperProps spring to use a ref and this has resulted in my width interpolation animation breaking:

Breaking Snippet

width: wrapperProps.width.interpolate(value => `${value}%`)

Full code

import React, { useRef } from 'react';
import { NavLink } from 'react-router-dom';
import { useSpring, useChain, animated } from 'react-spring';
import { animationConfig } from './sideNav.config';

export default function SideNavNavLink({
  hasChildren,
  icon,
  isIconView,
  title,
  url,
  visible
}) {
  const tabIndex = visible ? undefined : -1;
  const titleAttr = (isIconView && title) || undefined;

  const wrapperRef = useRef();
  const wrapperProps = useSpring({
    config: animationConfig,
    ref: wrapperRef,
    opacity: isIconView ? 0 : 1,
    width: isIconView ? 0 : 100
  });

  const titleRef = useRef();
  const titleProps = useSpring({
    display: isIconView ? 'none' : 'block',
    ref: titleRef
  });

  // Chain animation order
  useChain([wrapperRef, titleRef]);

  return (
    <NavLink
      className="side-nav__nav-link"
      to={url}
      tabIndex={tabIndex}
      title={titleAttr}
    >
      {icon && (
        <img
          className="side-nav__nav-link__icon"
          src={`${process.env.PUBLIC_URL}${icon}`}
          alt=""
        />
      )}

      <animated.div
        className="side-nav__title-animation-wrapper"
        style={{
          ...wrapperProps,
          width: wrapperProps.width.interpolate(value => `${value}%`)
        }}
      >
        <animated.span
          className="side-nav__nav-link__title"
          style={{ ...titleProps }}
        >
          {title}
        </animated.span>
        {hasChildren && hasChildren.length > 0 && (
          <span className="side-nav__nav-link__collapse-icon" />
        )}
      </animated.div>
    </NavLink>
  );
}

This results in “Cannot read property ‘interpolate’ of undefined” whereas if I take the ref out it works fine but I can’t chain my springs.

I’ve tried changing the values to ‘0%’ and ‘100%’ and whilst this solved the error by taking out the interpolate statement, the animation jumps from 0% to 100% and doesn’t interpolate the in between values.

Expected behavior

I would expect to be able to still perform interpolation with my values.

Environment

• react-spring v8.0.19
• react v16.8.6