Error: Tried to synchronously call function {assign} from a different thread.

[dochonglo]

Bug

Unfortunately, I'm receiving the following error on any screen that imports and uses the BottomSheetScrollView and BottomSheetBackdrop.

I've been able to pinpoint the error message to my node_modules/react-native-reanimated/src/reanimated2/Hooks.ts (225.0)

Below are the contents of my Hooks.ts file, where the error is occurring. Interestingly, the function is marked as a worklet.

`function styleUpdater( viewDescriptor, updater, state, maybeViewRef, adapters, animationsActive ) { 'worklet' const animations = state.animations || {}; const newValues = updater() || {}; const oldValues = state.last;

// extract animated props let hasAnimations = false; Object.keys(animations).forEach((key) => { const value = newValues[key]; if (!isAnimated(value)) { delete animations[key]; } }); Object.keys(newValues).forEach((key) => { const value = newValues[key]; if (isAnimated(value)) { prepareAnimation(value, animations[key], oldValues[key]); animations[key] = value; hasAnimations = true; } });

function frame(timestamp) { const { animations, last, isAnimationCancelled } = state; if (isAnimationCancelled) { state.isAnimationRunning = false; return; }

const updates = {};
let allFinished = true;
Object.keys(animations).forEach((propName) => {
  const finished = runAnimations(
    animations[propName],
    timestamp,
    propName,
    updates,
    animationsActive
  );
  if (finished) {
    last[propName] = updates[propName];
    delete animations[propName];
  } else {
    allFinished = false;
  }
});

if (Object.keys(updates).length) {
  updateProps(viewDescriptor, updates, maybeViewRef, adapters);
}

if (!allFinished) {
  requestFrame(frame);
} else {
  state.isAnimationRunning = false;
}

}

if (hasAnimations) { state.animations = animations; if (!state.isAnimationRunning) { state.isAnimationCancelled = false; state.isAnimationRunning = true; if (_frameTimestamp) { frame(_frameTimestamp); } else { requestFrame(frame); } } } else { state.isAnimationCancelled = true; state.animations = {}; }

// calculate diff const diff = styleDiff(oldValues, newValues); state.last = Object.assign({}, oldValues, newValues);

if (Object.keys(diff).length !== 0) { updateProps(viewDescriptor, diff, maybeViewRef, adapters); } }`

Finally, the following is my babel.config.js file:

module.exports = function (api) { api.cache(true); if ( process.env.NODE_ENV === "production" || process.env.BABEL_ENV === "production" ) { return { presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"], plugins: [ "react-native-paper/babel", ["transform-remove-console", { exclude: ["error", "warn", "info"] }], "react-native-reanimated/plugin", ], }; } else { return { presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"], plugins: ["react-native-reanimated/plugin"], }; } };

Environment info

Library	Version
@gorhom/bottom-sheet	^3.6.6
react-native	^0.64.2
react-native-reanimated	~2.1.0
react-native-gesture-handler	~1.10.2
react-navigation	^4.0.10
react-navigation-stack	^1.10.3
react-navigation-tabs	^2.6.2
react-native-screens	~3.0.0

Steps To Reproduce

Followed the steps to install gorhom/bottom-sheet in my ejected expo app.

1. npm install --save @gorhom/bottom-sheet@^4
2. npm install --save react-native-reanimated react-native-gesture-handler

Describe what you expected to happen:

1. I expected the library to be working successfully with no errors and the bottom sheet to be triggered when called. However, the error appears on any screen that imports and uses the BottomSheetScrollView and BottomSheetBackdrop

[github-actions[bot]]

@ismaelbarry: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.

[gorhom]

@ismaelbarry follow the installation instructions https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation

[dochonglo]

@gorhom - Thanks for reaching out and helping!

I've followed their installation guide; however, I'm still having the same problem. Below are the steps that I took:

1. npm install --save react-native-reanimated@2.3.0-alpha.1
2. cd iOS && pod install
3. I also added 'react-native-reanimated/plugin' to be the last listed item my plugins array in the babel.config.js file.

Unfortunately, I'm still getting the same type of error message that's pointing me to certain functions that are already market as worklets. Here's the error

Also, I chose not to use the npm install --save react-native-reanimated@next because it was installing v2.2.0 and as per the docs you linked, that version is no longer maintained.

Finally, here's the updated environment info:

Library	Version
@gorhom/bottom-sheet	^3.6.6
react-native	^0.64.2
react-native-reanimated	~2.3.0-alpha.1
react-native-gesture-handler	~1.10.2
react-navigation	^4.0.10
react-navigation-stack	^1.10.3
react-navigation-tabs	^2.6.2
react-native-screens	~3.0.0

[lander854]

Same issue here..

[mrlemoos]

@gorhom Would it be possible to reopen this issue? I encountered the same error while using Expo as platform and I believe it is not 100% fixed.

[ruida-shen]

Same issue, I followed the installation instructions https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ here but no help