Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix "Reading from _value directly is only possible on the UI runtime." on fast refresh during library development #5434

Merged
merged 6 commits into from
Dec 28, 2023

Conversation

tomekzaw
Copy link
Member

@tomekzaw tomekzaw commented Nov 29, 2023

Summary

This PR fixes one of the most annoying errors in Reanimated that often appears during development of the library as well as sometimes in client apps.

Zrzut ekranu 2023-11-29 o 21 50 06

Investigation

When mutable is created, we call registerShareableMapping(mutable, handle) to store the handle in _shareableCache.

When cloning a worklet, for each mutable in its closure, in makeShareableCloneRecursive we obtain the handle using _shareableCache.get method and skip the execution of the rest of the function body.

During a fast refresh, React holds the same instance of the mutable (that's guaranteed by useRef) but for some reason _shareableCache is regenerated and becomes an empty WeakMap.

Because of it, makeShareableCloneRecursive can't find the handle in _shareableCache and tries to clone the mutable as if it was a regular JS object.

We use Object.entries to iterate over the keys which throws an error when _value property is accessed.

Solution

The proposed solution is to simply move the definition of _shareableCache to a separate file. During a fast refresh, the contents of this file usually doesn't change (unless you modify this exact file on purpose) so the cache is not recreated which solves the issue.

Remarks

I also replaced all calls to _shareableCache.set with registerShareableMapping which does exactly the same.

Test plan

  1. Open PlatformChecker.ts
  2. Add return true; in the implementation of isReducedMotion()
  3. Save the file. This should trigger a fast refresh.
  4. Observe the error "[Reanimated] Reading from _value directly is only possible on the UI runtime."
  5. Apply the changes from this PR, repeat steps 1-4, the error should not appear again.

@tomekzaw tomekzaw changed the title Fix "[Reading from _value directly is only possible on the UI runtime." Fix "Reading from _value directly is only possible on the UI runtime." Nov 29, 2023
@terrysahaidak
Copy link
Contributor

By the way, I had this same error when I would pass animated styles to a regular React Native view, maybe we can address this too?

@tomekzaw
Copy link
Member Author

@terrysahaidak Yes, thanks for reminding me about this. I believe this was reported in #5117. We'll try to provide a meaningful error in this case as well.

@tomekzaw tomekzaw changed the title Fix "Reading from _value directly is only possible on the UI runtime." Fix "Reading from _value directly is only possible on the UI runtime." on fast refresh during development Nov 30, 2023
@tomekzaw tomekzaw changed the title Fix "Reading from _value directly is only possible on the UI runtime." on fast refresh during development Fix "Reading from _value directly is only possible on the UI runtime." on fast refresh during library development Nov 30, 2023
@tomekzaw tomekzaw changed the title Fix "Reading from _value directly is only possible on the UI runtime." on fast refresh during library development Fix "Reading from \_value\ directly is only possible on the UI runtime." on fast refresh during library development Nov 30, 2023
@tomekzaw tomekzaw changed the title Fix "Reading from \_value\ directly is only possible on the UI runtime." on fast refresh during library development Fix "Reading from _value directly is only possible on the UI runtime." on fast refresh during library development Nov 30, 2023
Copy link
Member

@piaskowyk piaskowyk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🫡

src/reanimated2/shareableCache.ts Outdated Show resolved Hide resolved
@tjzel tjzel added this pull request to the merge queue Dec 28, 2023
Merged via the queue into main with commit c6add7d Dec 28, 2023
7 checks passed
@tjzel tjzel deleted the @tomekzaw/fix-reading-from-value-directly branch December 28, 2023 14:52
github-merge-queue bot pushed a commit that referenced this pull request Jan 2, 2024
… its logic (#5530)

## Summary

Extension of #5434.

## Test plan

🚀
Latropos pushed a commit that referenced this pull request Jan 3, 2024
@batman204
Copy link

Ha,Ha,Ha,Ha,Ha,Ha,Ha,Ha If you come across this question, please check your code automatically import Animated objects from the library, please make sure that from react-native-reanimated and not from react-native , This stupid question wasted me half an hour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants