React-spring: Native prop causes animation visually to fail, but the animated items are delayed from entry/removal as if animations were working

[Slapbox]

🐛 Bug Report

Animations that work fine fail if passed native

To Reproduce

Add native to an otherwise working <Transition /> - Repro

Expected behavior

native prop improves performance without causing animations to fail

Link to repro (highly encouraged)

https://codesandbox.io/s/jovial-darkness-cz1go

Environment

• [email protected]
• [email protected]

[aleclarson]

Please try with v9:

npm install react-spring@next

You won't need the native prop. It's the default behavior now.

[Slapbox]

Seems to resolve the issue. Thank you!

[Slapbox]

@aleclarson - Upgrading to v9 is interfering with setting the background color of list items within <Transition />

When a user scrolls down the list using their keyboard, the selected item, contained inside of an <animated.li /> is highlighted by changing the background color and border. With v9, no changes to styles of children are occurring.

Do you have any ideas what might cause this? Some change in memoization? I tried native={false}, but no luck.

[aleclarson]

Please try with the latest canary. 👍

You'll need a slight change to your usage of the Transition component. See here: #809

If you can't figure it out, please provide a sandbox or git url.

[Slapbox]

After reverting to 9.0.0-beta34, things mysteriously work and the args are in the intended order. I confirmed I was on this exact version previously, so god knows what's going on here - but it's working right now.

Disregard below.

----

---

Thanks @aleclarson

The latest canary (9.0.0-canary.808.17.55c5691) gives me an error items is not defined (See callstack separately)

---

In beta34, it seems like the arguments are the reverse of what's mentioned in #809?

<Transition
  items={items}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {(item, values=> (  // ITEM SEEMS TO BE FIRST? (Contains React child component)
    <animated.div style={values}>{item}</animated.div>
  )}
</Transition>

Additionally, values appears to only contain a string 'initial'? I get the error TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

It seems like beta34 should work, but for the fact that I'm only getting a string for values. Any thoughts? Thanks a lot your attention and assistance with this @aleclarson.

[aleclarson]

The Transition API is different between beta.34 and canary.808.17. #809 applies to the canary only.

Please provide a minimal CodeSandbox or git url that shows the issue. 👍

[Slapbox]

@aleclarson - can you point me to any documentation/example/discussion on how to use the latest version? I can create a repro if that doesn't elucidate my issue - but right now I don't even know how to use the new version. I can't imagine the items prop has been removed, right?

<Transition items={items} />, where items is an array of React components, I get items is not defined

[aleclarson]

Works fine for me: https://codesandbox.io/s/react-spring-issue-919-1rvf9

[Slapbox]

Works fine for me too, with a closer test case to my own

Finding: it doesn't seem that old items are removed properly? I noted your use of item && ... and thought that would be the trick, but (some?) old items remain.

---

In [email protected], an array of valid React children invariably fails.

Any ideas? Worked fine in 8.x. A stripped down version works on CodeSandbox. Very baffling. Latest canary never gets to the child function that renders the items though, because it insists there are no items and throws that error.

[aleclarson]

Line 2210 has no reference to an items variable. You probably need to reinstall your dependencies.

[Slapbox]

@aleclarson - thank you so much for your responses today. I've reinstalled the package twice now, and cleared the folder out before installing the second time.

2210 proves not to match perfectly to the actual file on the filesystem. The actual code on at the point of failure is:

Variables at time of failure:

In node_modules/@react-spring/core/package.json, I see:

  "name": "@react-spring/core",
  "version": "9.0.0-canary.808.17.55c5691",

Everything seems to be in order as far as installation goes.

---

Separately, do you have any thoughts on the sandbox I linked above failing to remove items from the list? Have I overlooked something there?

Thank you again for your help @aleclarson. I really appreciate it.

[aleclarson]

Okay, there's the issue! Very strange that the sandbox works at all.. 🤔

Some kind of Babel bug. Looks like <Spring> is also affected.

Even more strange, the <Trail> component is not affected, even though it uses the same syntax..

[Slapbox]

Let me know if there's anything I can do to assist!

Oh also, if you have any thoughts on failure to remove old items in the sandbox.

[Slapbox]

@aleclarson would you like me to repurpose this issue or create a new issue for this issue, or neither?

[Slapbox]

I hoped upgrading from babel packages from a mix of 7.6 and 7.7 all to their latest would resolve this, but no luck.

Is this something that's fixable by the maintainers of react-spring, or is this issue beyond your control? We're hoping to release a new version including react-spring soon, and we'd be fine with using a nightly since we only use react-spring in this one place right now. But of course, items is not defined is a bit of a showstopper.

Any thoughts @aleclarson?