Set support in shared value?

[thisisgit]

Hi, I just found out that the issue requesting for Map and Set support got closed so tried it by myself.
I tried using Set in a shared value but I faced multiple issues when trying to access it from JS thread.

First, here's reproducible code for following issues:

import { Button, StyleSheet, Text, View } from 'react-native';

import { useState } from 'react';
import { runOnJS, runOnUI, useSharedValue } from 'react-native-reanimated';

export default function HomeScreen() {
  const testSet = useSharedValue<Set<string> | undefined>(undefined);
  const [isSetObject, setIsSetObject] = useState<boolean | undefined>();

  function fromJS() {
    // This always crashes
    testSet.value = new Set([]);
  }
  function fromUI() {
    runOnUI(() => {
      testSet.value = new Set([]);
    })();
  }

  function checkFromUI() {
    runOnUI(() => {
      if (testSet.value == null) {
        runOnJS(setIsSetObject)(undefined);
      } else if (testSet.value.has == null) {
        runOnJS(setIsSetObject)(false);
      } else {
        runOnJS(setIsSetObject)(true);
      }
    })();
  }
  function checkFromJS() {
    if (testSet.value == null) {
      setIsSetObject(undefined);
    } else if (testSet.value.has == null) {
      setIsSetObject(false);
    } else {
      setIsSetObject(true);
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Set?{' '}
        {isSetObject == null ? 'undefined' : isSetObject ? 'True' : 'False'}
      </Text>
      <Button title={'Assign from UI'} onPress={fromUI} />
      <Button title={'Assign from JS (this crashes)'} onPress={fromJS} />
      <Button title={'Check from UI'} onPress={checkFromUI} />
      <Button title={'Check from JS'} onPress={checkFromJS} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 80,
    paddingHorizontal: 24,
    alignItems: 'center',
  },
  text: {
    fontSize: 32,
    backgroundColor: '#dedede',
  },
});

Assigning Set shared value from JS thread leads to app crash

Simulator.Screen.Recording.-.iPhone.16.-.2025-03-06.at.22.26.24.mp4

Pressing that button calls

const testSet = useSharedValue<Set<string> | undefined>(undefined);

// ...

  function fromJS() {
    // This always crashes
    testSet.value = new Set([]);
  }

and this just crashes the app.

Assigning the value from UI thread works, but accessing it from JS thread returns empty object({}) while UI thread returns correct value

Simulator.Screen.Recording.-.iPhone.16.-.2025-03-06.at.22.30.21.mp4

Unlike above issue, assigning value from UI thread doesn't crash the app.

function fromUI() {
    runOnUI(() => {
      testSet.value = new Set([]);
    })();
  }

And if I try accessing methods/properties of Set in UI thread, such as has, delete, add, etc., they all work correctly. In this example, I used testSet.value.has == null to check if it's a Set object.
So from this code, it sets isSetObject to true:

function checkFromUI() {
    runOnUI(() => {
      if (testSet.value == null) {
        runOnJS(setIsSetObject)(undefined);
      } else if (testSet.value.has == null) {
        runOnJS(setIsSetObject)(false);
      } else {
        // !
        runOnJS(setIsSetObject)(true);
      }
    })();
  }

But if I access the shared value from JS thread, it returns an empty object. So from this code, it sets isSetObject to false:

function checkFromJS() {
    if (testSet.value == null) {
      setIsSetObject(undefined);
    } else if (testSet.value.has == null) {
      // !
      setIsSetObject(false);
    } else {
      setIsSetObject(true);
    }
  }

Assigning initial value to Set shared value and accessing it from UI thread crashes the app

Simulator.Screen.Recording.-.iPhone.16.-.2025-03-06.at.22.40.50.mp4

Instead of initializing the shared value with undefined, I gave a Set value:

// const testSet = useSharedValue<Set<string> | undefined>(undefined);
const testSet = useSharedValue<Set<string> | undefined>(new Set([]));

And accessing it from the UI thread crashes the app (no crash in JS thread but returns empty object):

function checkFromUI() {
    runOnUI(() => {
      // Just crashes when ran
      if (testSet.value == null) {
        runOnJS(setIsSetObject)(undefined);
      } else if (testSet.value.has == null) {
        runOnJS(setIsSetObject)(false);
      } else {
        runOnJS(setIsSetObject)(true);
      }
    })();
  }

---

Then I went back to the issue again and this caught my attention #1228 (comment):

Now in Reanimated 3 you can uses Maps and Sets in worklets 🎉

Does this mean that Map and Set are only supported within worklets, e.g. using them as variables in worklets, but not in shared value?
If so, then I guess it wouldn't be a priority, but I wonder if there's any plan on supporting those types in shared values?
The use case for me is to store array of elements without any duplicates, and currently I'm handling them with custom object that looks { [id: string]: boolean }. I would definitely love to use Set as they're more maintainable and readable with the methods that they provide.

[MatiPl01]

Hey @thisisgit!
You can use Set and Map only a single runtime at a time and transfer it between runtimes. That is why you can assign Set to a SharedValue on the UI runtime (within the runOnUI callback) and use all its methods. The same happens if you are using Set or Map only on JS.

The problem starts to happen when you want to access Set/Map from the JS runtime when the object lives on the UI runtime (was created within a worklet executed on the UI thread) or access the object created in the JS runtime from the UI thread.

Does this mean that Map and Set are only supported within worklets, e.g. using them as variables in worklets, but not in shared value?

You are right, they are supported only on a single runtime, so when you create them in worklets (on the UI runtime), they cannot be used in the JS runtime.

If so, then I guess it wouldn't be a priority, but I wonder if there's any plan on supporting those types in shared values?

We may add support for this in the future, but currently we are focused on other things so it may take some time. For now, you can use a JS object instead of Set or Map. As you already wrote, you can use a JS object with string keys and whatever values (such as true for all keys) to mimic the Set behavior and this is the correct approach.