Add Map and Set support

[likern]

Description

This support is required to store information about pages (rows grouped by pages) for Animated.ScrollView.

Now, if I'm correct, there is no such support. And Map were treated as usual object (or was undefined) inside worklet, if was created through useSharedValue(new Map())

Caveats

Motivation

Track page ids and efficiently retrieve rows by this id (for adding or deleting rows on demand).

Also to use to store animated references.

[Andarius]

Same issue that it took me some time to debug. If I'm defining a Map such that Map<string, Animated.SharedValue<number>> this will crash the app if I try to iterate over it (but not access it's size) in a worklet.

[andreialecu]

I attempted to use a plain object for this, and ran into some weird issues with rc.0.

const someValue = useSharedValue({})

Which would then be updated via someValue.value = {...someValue.value, [key]: newValue }.

However, when attempting to read someValue.value[key] from a scroll handler it would display stale values. Sometime it would contain the key I wanted and sometimes it didn't.

Actually, even attempting to read it immediately after setting it would show stale data:

someValue.value = {...someValue.value, [key]: newValue }
console.log(someValue.value) // key sometimes isn't here, after a while it may or may not be

This especially manifests when a lot of JS calls try to update the value so it may be some sort of race condition between the UI and JS thread.

I wasn't able to upgrade past rc.0, because even with rc.3 I'm running into _setGlobalConsole is undefined: #1640 (tried all the solutions in that thread, nuking caches, etc, without success)

[likern]

@andreialecu Is this line is run in context of worklet?

someValue.value = {...someValue.value, [key]: newValue }

I think ... syntax is not supported inside running worklets. At least I had issue with destructuring array like this one

const [element, ...other] = array;

if this code was run inside of worklet, while on usual JS side it is worked as expected.

[andreialecu]

By updating .value property. Updating .value is sync when running on the UI thread, or async when running on the React Native JS thread.

ref: https://docs.swmansion.com/react-native-reanimated/docs/shared-values#shared-values-vs-animatedvalue

I guess this would explain the behavior above in the general sense.

However I also tried wrapping the entire set call in runOnUI() without success 🤔
Will probably revisit this at a later point.

In the mean-time got unblocked by using normal react useState and passing it in the dep array to useAnimatedScrollHandler

[andreialecu]

I think ... syntax is not supported inside running worklets. At least I had issue with destructuring array like this one

I tried Object.assign as well and the behavior persisted from within runOnUI. It seems like some sort of race condition exists. But again I'm on rc.0, so this may have been fixed in latest rcs.

You could try it yourself if you need map-like behavior because it seems to work. The problem in my case was when I started updating it too fast.

[jkadamczyk]

Hi @likern @andreialecu

Let me try to rephrase it.
What you want to have implemented in Reanimated 2 is support for using Map and Set JS objects as a value passed to SharedValue from Reanimated 2.

That would be a feature request we can accept, but I can't guarantee we will implement something like this.
Correct me if I'm wrong here

[jkadamczyk]

@likern @andreialecu

From what I see apart from the feature request to support Map and Set you tried to work around this issue by using a JS Object {'key': 'value'} and found some issues with it. If you still have issues, could you please create a Bug report issue separately and provide a small repro with it if you still have problems with Reanimated 2 working as desired?

Thanks for sparing your time and have a nice day 😊

[thecynicalpaul]

Would love to see this happen as well.