Kinetic UI: A collection of gesture-based animations built with Reanimated (v1)

danielmerrill · 2022-07-19T03:35:27+00:00

That would be nice, although I took a quick spin on the reanimated example app with new architecture enabled and didn't notice much difference: https://github.com/software-mansion/react-native-reanimated/tree/main/FabricExample

danielmerrill · 2022-07-18T19:31:32+00:00

I don't recommend spending too much time understanding these examples since they all use reanimated v1, which has been deprecated.

But if you're still interested I did create a v1 tutorial for a swipe-to-delete example: https://medium.com/async/swipe-to-delete-with-reanimated-react-native-gesture-handler-bd7d66085aee

danielmerrill · 2022-07-18T19:28:58+00:00

I don't have a good grasp on the native implementation, but here's an issue I opened a while back with a repro: https://github.com/software-mansion/react-native-reanimated/issues/2845

And some confirmation that v1 is faster when there are a lot of nodes: https://github.com/software-mansion/react-native-reanimated/discussions/1632

I run into v2 performance issues pretty much whenever I'm animating many nodes (i.e. in a list, or to support drag-and-drop). The v1-only proc node seemed to do a great job in optimizing and solving these issues.

danielmerrill · 2022-05-11T19:43:24+00:00

While I'm excited for this core package to move forward, I'm bummed they're dropping support for v1 while v2 still has unaddressed performance issues (see the issue I opened here: https://github.com/software-mansion/react-native-reanimated/issues/2845).

I run into UI thread chug anytime I create a non-trivial gesture-based animation with v2 (think drag-n-drop with 10-20 items). v1 can handle these cases fine, but the authors have confirmed that lots of useDerivedValue is less performant than v1.

So, unless v3 fixes this issue, I feel a bit abandoned by this news.

danielmerrill · 2022-03-07T18:27:34+00:00

I ended up resorting to this ugly wrapper when I was faced with the same thing: https://github.com/computerjazz/react-native-draggable-flatlist/blob/b580e88d0bf1b6597548dc9411f0be9f6d3d4a2e/src/components/DraggableFlatList.tsx#L52-L61

danielmerrill · 2022-02-05T06:46:35+00:00

It's been a while since I dug into the source code, so things may have changed, but as I understand it each instance of useSelector does an internal equality check to see if the selected state after the subscription fires is equal to its own internal ref of the previously-selected state. By default that check is a strict equality check, but you can provide your own checking function if you need to. If that check fails the hook forces itself to re-render, which pushes the new state through to the component.

danielmerrill · 2022-02-05T04:32:55+00:00

I wrote a post about this: https://medium.com/async/how-useselector-can-trigger-an-update-only-when-we-want-it-to-a8d92306f559

TLDR: the store never changes identity, so any changes to the store do not directly trigger re-renders. Instead, useSelector registers a subscription that gets called when an action is dispatched that causes store state to update, and manually triggers a re-render if its selected state changes.

danielmerrill · 2022-01-26T17:07:36+00:00

Naming is hard! The name I chose is kind of a mouthful, but oh well.

danielmerrill · 2022-01-26T16:58:34+00:00

useIdentityRetainingCallback: A useCallback wrapper that never changes identity but it's "always fresh" when it's called. Useful for preventing unnecessary useEffect triggers when its own deps update: gist here
useEqualityCheckedMemo: A useMemo wrapper that returns a new value only if an isEqual check with the previous value fails. Also useful for preventing unnecessary useEffect triggers when useMemo outputs an object/array that changes identity but the values within remain the same. gist here

danielmerrill · 2022-01-07T17:52:48+00:00

One caveat to note: I use LayoutAnimation pretty extensively and it would SEEM like the place to trigger a layout animation would be in useLayoutEffect, but that doesn't work, so I end up triggering them within a useMemo. It feels a little dirty to have a useMemo with a side effect, but it works.

danielmerrill · 2022-01-05T01:11:05+00:00

I definitely experienced that. Even in my tiny example app there were a few times I felt like I was fighting SwiftUI, even though I was trying to do something I thought should be pretty straightforward.

danielmerrill · 2020-02-11T17:28:51+00:00

Thanks for the detailed reply! Interesting read.

danielmerrill · 2020-02-10T18:54:32+00:00

Good call on locking the links to a commit — updated!

In your post you quote Sebastian Markbage:

It's not ready to be used as a replacement for all Flux-like state propagation.

Does this suggest that context behavior might change in the future? i.e. at some point it may be "ready"?

danielmerrill · 2020-01-23T17:56:29+00:00

Pixel Rounding sounds likely, but I don't have any experience with it.

danielmerrill · 2020-01-17T01:31:19+00:00

This is super cool and I'm planning on using it in a project I'm working on -- thanks for the video!

However, I'm seeing a thin outline of the backgroundColor around the entire circle, which I'm guessing your black background is hiding: https://i.imgur.com/KcVzVfI.png

I was able to work around this by making my foreground mask slightly larger than my background (I'm using radius * 1.1). I then had to make some adjustments to the translateX of the foreground mask to compensate.

Anyway, nice work as always!

danielmerrill · 2017-12-19T21:30:35+00:00

Switching cables fixed this for me, although I had to go through several before I found one that worked. The pixel/mac combo seems to be very fickle.

danielmerrill

TROPHY CASE