software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.87k stars 1.3k forks source link

useSharedValue `modify` does not exist, but shows in docs #6067

Closed lucksp closed 4 months ago

lucksp commented 4 months ago

Description

I am trying to update an array of values, so that I can smooth out a Skia frame processor drawing, so useSharedValue came up.

I noticed in the remarks section of the docs, it says:

When storing large arrays or complex objects in a shared value, you can use .modify method to alter the existing value instead of creating a new one.

However, when I try to implement this method, the TypeDef does not show any modify as available as part of the ISharedValue

image
export interface ISharedValue<T> {
  get value(): T;
  set value(v: T);
  addListener(listener: () => void): () => void;
}

I have also tried logging sv.modify but it is undefined.

react-native-reanimated@~3.6.2:
  version "3.6.3"
  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.3.tgz#859cf2320e37c80e3a21e19db24f82c34d6d3ded"
  integrity sha512-2KkkPozoIvDbJcHuf8qeyoLROXQxizSi+2CTCkuNVkVZOxxY4B0Omvgq61aOQhSZUh/649x1YHoAaTyGMGDJUw==
  dependencies:
    "@babel/plugin-transform-object-assign" "^7.16.7"
    "@babel/preset-typescript" "^7.16.7"
    convert-source-map "^2.0.0"
    invariant "^2.2.4"

Please advise: Are the docs accurate and it's a version issue or something else?

In the meantime, I am falling back to copy array sv.value = [...sv.value, 1000]; // works, but creates a new copy ⚠️

Steps to reproduce

  1. Copy the docs example into your project:

    const sv = useSharedValue([1, 2, 3]);
    
    sv.value.push(1000); // Reanimated loses reactivity 🚨
    
    sv.value = [...sv.value, 1000]; // works, but creates a new copy ⚠️
    
    sv.modify((value) => {
    'worklet';
    value.push(1000); // ✅
    return value;
    });
  2. expect to see error that modify does not exist

Snack or a link to a repository

n/a

Reanimated version

3.6.2

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

None

Device model

iPhone 13 pro

Acknowledgements

Yes

github-actions[bot] commented 4 months ago

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?