Repository navigation
fix(ui): stop capturing Platform in on-device UI worklets (backport #967) - #976
Merged
Merged
Conversation
On React Native 0.87 with react-native-worklets 0.12 the on-device UI crashes as soon as MobileMenuDrawer mounts, with "[Worklets] Trying to convert a cyclic object to a serializable" or errors thrown from native module getters while Worklets walks the captured values. The menu backdrop and the addons panel both read `Platform.OS` inside a `useAnimatedStyle` worklet. The worklets babel plugin captures every outer value a worklet references and Worklets copies them to the UI runtime, so these worklets carried `Platform` with them, and in the published CommonJS build, where the import compiles to `react_native.Platform.OS`, the entire `react-native` module. Read `Platform.OS` once at module level into `isAndroid` and use that in the worklets, so they only capture a boolean. The backdrop worklet also destructures `animatedIndex` instead of capturing the whole props object. Backport of #967 to v10-stable, without its jest test: @storybook/react-native-ui has no jest setup on this branch. (cherry picked from commit da0e7cf) Co-authored-by: Daniel Williams <me@dannyhw.com>
🦋 Changeset detectedLatest commit: 6d14a48 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue: #935
What I did
Backport of #967 to
v10-stable.On React Native 0.87 with react-native-worklets 0.12, the full on-device UI crashes on launch with "[Worklets] Trying to convert a cyclic object to a serializable". The menu backdrop and addons panel
useAnimatedStyleworklets readPlatform.OSinside the worklet, so the worklets babel plugin capturedPlatform, and in the published CommonJS build the wholereact-nativemodule, and Worklets tried to copy it to the UI runtime.MobileMenuDrawer.tsxandMobileAddonsPanel.tsxreadPlatform.OSonce at module level intoisAndroidand use that inside the worklets, so they capture a boolean.animatedIndexinstead of capturing the whole props object.@storybook/react-native-ui.Differences from #967:
worklets.test.tsx) is left out.@storybook/react-native-uihas no jest setup onv10-stable, and adding one is more than a patch backport should carry.nextcomes from a different change.How to test
Build the package and check what the worklets in the published CommonJS output capture, by running the worklets babel plugin over
packages/react-native-ui/dist/index.jsand reading each worklet's__closure:v10-stablereact_native, insets, height, animatedPositionreact_native, backdropComponentPropsisAndroid, insets, height, animatedPositionisAndroid, animatedIndexAll of these pass on this branch. The crash itself was reproduced and the fix verified on iOS and Android for #967 on
next; this backport has not been run on a device, since the example app on this branch is on React Native 0.86 with react-native-worklets 0.10, where the crash doesn't occur.