github-actions[bot]
commented
3 years ago Issue validator
The issue is valid!
Closed Nast-ua closed 1 week ago
github-actions[bot]
commented
3 years ago The issue is valid!
lilasquared
commented
3 years ago @Nast-ua could it possibly be because you are missing the PanGestureHandler in the return?
Nast-ua
commented
3 years ago thanks for the comment! Actually, I have it, I forgot to edit the code as a code snippet, so it was not shown properly. My bad, sorry. I just updated the code, if you have any thoughts, will appreciate it!
lilasquared
commented
3 years ago I just pulled down their playground repo and copied this example into the Screen.js file, and it seems to be working fine. Can you check your configurations against that repo? https://github.com/software-mansion-labs/reanimated-2-playground
Nast-ua
commented
3 years ago Many thanks for your reply! I just did the same and pulled the reanimated-2-playground repo and, unfortunately, the same error was thrown. But then at some point after reseting cache many times, it worked. Unfortunately, when I use the code example in my app, the error is still thrown. I checked the configurations and they are all good against the reanimated playground repo. Do you think it can be still sth wrong with configurations or maybe some dependencies incompatibility? Thanks!
jakub-gonet
commented
3 years ago Do you use Expo by any chance?
Nast-ua
commented
3 years ago No, I don't use Expo. I just figured out, as soon as I don't clear the cache after reanimated-2-playground app has been run and just run my app with reanimated test example in it, everything works as expected and no error is thrown. If I do reset the cache, the error is thrown again. So I guess, there might be some dep incompatibilities or sth with configurations? Although the babel config and metro config between the apps are the same. Will appreciate any suggestions!
batical
commented
3 years ago Same issue here.(iOS for now did not test on android)
I am doing some test(aka having fun with the v2 version) on real app case. Converting existing v1 to v2
Playground is working
React: 16.13.1 React Native: 0.63.4 React Native Reanimated: 2.0.0-rc.3 react-native-gesture-handler: "^1.10.3", (1.9 run playground, will try it) NodeJS: 12.19.0
trying a simple PanView
const translationX = useSharedValue(0)
const translationY = useSharedValue(0)
const handlePan = useAnimatedGestureHandler<
PanGestureHandlerGestureEvent,
{
offsetX: number
offsetY: number
}
>({
onStart: (_event, ctx) => {
ctx.offsetX = translationX.value
ctx.offsetY = translationY.value
},
onActive: (event, ctx) => {
translationX.value = ctx.offsetX + event.translationX
translationY.value = ctx.offsetY + event.translationY
}
/* onEnd: ({ velocityX, velocityY }) => {
translateX.value = withDecay({
velocity: velocityX,
clamp: [0, boundX],
});
translateY.value = withDecay({
velocity: velocityY,
clamp: [0, boundY],
});
}, */
})
const stylePan = useAnimatedStyle(() => {
return {
transform: [{ translateX: translationX.value }, { translateY: translationY.value }]
}
})
return (
<PanGestureHandler onGestureEvent={handlePan} onHandlerStateChange={handlePan}>
<Animated.View style={stylePan}>{children}</Animated.View>
</PanGestureHandler>
)
}```can't manage to make it work(event with 2.0.0 final)
Project -package.json --mobile/ ----package.json
in the projet package.json
"dependencies": {
"react": "16.13.1",
"react-native": "0.63.4"
},
"devDependencies": {
"@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
"@types/react-native": "0.63.20",
"git-branch-is": "^3.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"react-docgen-typescript": "^1.20.5",
"react-dom": "16.13.1",
"typedoc": "^0.19.2"
}in the mobile package.json
"dependencies": {
"@gorhom/bottom-sheet": "3.4.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-reanimated": "2.0.0",
"react-native-gesture-handler": "1.10.3"
},
"devDependencies": {
"@babel/core": "7.10.5",
"@babel/plugin-external-helpers": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/runtime": "7.10.5",
"@react-native-community/cli": "^4.14.0",
"@react-native-community/cli-platform-android": "^4.13.0",
"@react-native-community/cli-platform-ios": "^4.13.0",
"@react-native-community/eslint-config": "^2.0.0",
"@testing-library/react-hooks": "^5.1.0",
"@testing-library/react-native": "^7.2.0",
"@types/jest": "^26.0.14",
"@types/react-native": "0.63.20",
"@typescript-eslint/eslint-plugin": "2.27.0",
"@typescript-eslint/parser": "^3.3.0",
"babel-jest": "^24.9.0",
"babel-plugin-import": "^1.13.0",
"babel-plugin-module-resolver": "^3.2.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.5.1",
"eslint-config-airbnb-typescript": "^8.0.2",
"eslint-config-prettier": "^6.5.0",
"eslint-config-react": "^1.1.7"
"jest": "^24.9.0",
"metro": "0.59.0",
"metro-react-native-babel-preset": "^0.64.0",
"prettier": "^1.19.1",
"react-docgen-typescript-loader": "^3.2.0",
"react-dom": "16.13.1",
"react-native-typescript-transformer": "^1.2.12",
"react-test-renderer": "16.13.1",
"ts-jest": "^26.4.4",
"typescript": "4.2.3"
}I have only one babel.config.js
module.exports = {
presets: [ 'module:metro-react-native-babel-preset' ],
plugins: [ 'react-native-reanimated/plugin']
}If anyone has any idea ?
kaoDev
commented
3 years ago same problem here, I also get the Synchronously call function error and the project is also part of a mono repo with workspaces
kaoDev
commented
3 years ago this solution helped https://github.com/software-mansion/react-native-reanimated/issues/1720#issuecomment-789287795
The important bit is to replace the projectRoot in the metro.config with watchFolders = [projectRoot]
batical
commented
3 years ago thanks; My workspace is not using the watchfolder, but some hoisting with the react native cli installed as dev dependency.
I will try to update my workspace setting and configure the watchFolders
thanks
batical
commented
3 years ago @kaoDev I can confirm this is working now. Lots of works to upgrading my "old" workspace way
thanks
leonnardovv
commented
3 years ago I had the same issue, tried everything until I removed 'babel-preset-expo' from my babel.config.js. Then it worked.
birkir
commented
3 years ago I'm using nx react-native where there is a custom metro bundler file resolver.
And none of suggestions are working. Using "watchFolders" instead of "projectRoot" breaks the metro resolver.
kaoDev
commented
3 years ago hi @birkir I'm also using the nx toolchain. it works for me with the following config:
const { withNxMetro } = require('@nrwl/react-native');
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
const { projectRoot, ...cfg } = withNxMetro(
{
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
},
{
// Change this to true to see debugging info.
// Useful if you have issues resolving modules
debug: true,
},
);
cfg.watchFolders = [projectRoot]; // <- using the projectRoot for watchFolders
return cfg;
})();But I also had to do some changes for android and ios:
app/build.gradle:
ext {
react = [
entryFile: "src/main.tsx",
root: "../../",
]
}MainApplication.java:
@Override
protected String getJSMainModuleName() {
return "src/main";
}
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}AppDelegate.m
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/main" fallbackResource:nil];
jamesallain
commented
3 years ago module.exports = function (api) {
api.cache(false);
return {
presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"],
plugins: [
"react-native-reanimated/plugin",
};
};I had to remove module:metro-react-native-babel-preset to get it to work.
dwamianm
commented
2 years ago hi @birkir I'm also using the nx toolchain. it works for me with the following config:
24 hours of pulling my hair out trying to get this to work with NX and you rode is like a boss level knight and saved me from giving up on reanimated in an NX project!
Thanks @kaoDev !
kacperkapusciak
commented
2 years ago Is there anything more that we could help with this issue?
Recent comments relate to configuration problems rather than the error itself.
kaoDev
commented
2 years ago I think this issue is specific to mono repo usage and to the nx toolchain. So perhaps it could be worth add a hint to the readme, but not sure if it's worth it for this specific issue
quicksilverr
commented
2 years ago @kaoDev I've followed all your steps, but still I'm getting this error -
Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?,
Can you please share, If I've missed anything..
Here's my package.json
{
"name": "app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "nx serve",
"build": "nx build",
"test": "nx test",
"start-web:dev": "npx env-cmd -f .env.development nx serve web-app",
"start-web:prod": "npx env-cmd -f .env.production nx serve web-app"
},
"private": true,
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.17",
"@react-native-clipboard/clipboard": "^1.8.5",
"@react-native-community/blur": "^3.6.0",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-masked-view/masked-view": "^0.2.6",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4b389bff/@reduxjs/toolkit",
"@twotalltotems/react-native-otp-input": "^1.3.11",
"@types/react-native-vector-icons": "^6.4.10",
"core-js": "^3.6.5",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-gradient-text": "^0.1.0",
"react-localization": "^1.0.17",
"react-native": "0.66.2",
"react-native-config": "^1.4.5",
"react-native-confirmation-code-field": "^7.3.0",
"react-native-countdown-component": "^2.7.1",
"react-native-gesture-handler": "^2.3.2",
"react-native-linear-gradient": "^2.5.6",
"react-native-localization": "^2.1.7",
"react-native-masked-text": "^1.13.0",
"react-native-paper": "^4.11.1",
"react-native-pg-react-native-sdk": "^2.1.7",
"react-native-reanimated": "^2.6.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.2",
"react-native-shimmer-placeholder": "^2.0.8",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "^0.17.5",
"react-native-web-linear-gradient": "^1.1.2",
"react-otp-input": "^2.4.0",
"react-redux": "7.2.5",
"react-router-dom": "6",
"redux-persist": "^6.0.0",
"regenerator-runtime": "0.13.7",
"tslib": "^2.0.0"
},
"devDependencies": {
"@babel/core": "7.12.13",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@babel/preset-flow": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@nrwl/cli": "13.4.4",
"@nrwl/cypress": "13.4.4",
"@nrwl/detox": "13.4.4",
"@nrwl/eslint-plugin-nx": "13.4.4",
"@nrwl/jest": "13.4.4",
"@nrwl/linter": "13.4.4",
"@nrwl/nx-cloud": "latest",
"@nrwl/react": "13.4.4",
"@nrwl/react-native": "^13.4.4",
"@nrwl/storybook": "^13.4.4",
"@nrwl/tao": "13.4.4",
"@nrwl/web": "13.4.4",
"@nrwl/workspace": "13.4.4",
"@react-native-community/cli": "6.1.0",
"@react-native-community/cli-platform-android": "6.1.0",
"@react-native-community/cli-platform-ios": "6.1.0",
"@storybook/addon-essentials": "~6.4.5",
"@storybook/builder-webpack5": "~6.4.5",
"@storybook/manager-webpack5": "~6.4.5",
"@storybook/react": "~6.4.5",
"@svgr/webpack": "^6.2.1",
"@testing-library/jest-dom": "5.15.0",
"@testing-library/jest-native": "4.0.4",
"@testing-library/react": "12.1.2",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/react-native": "8.0.0",
"@types/detox": "17.14.3",
"@types/jest": "27.0.2",
"@types/lodash": "^4.14.178",
"@types/node": "14.14.33",
"@types/react": "17.0.30",
"@types/react-dom": "17.0.9",
"@types/react-native": "0.66.2",
"@types/react-native-countdown-component": "^2.7.0",
"@typescript-eslint/eslint-plugin": "~5.3.0",
"@typescript-eslint/parser": "~5.3.0",
"babel-jest": "27.2.3",
"babel-loader": "^8.2.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-react-native-web": "^0.17.5",
"cypress": "^9.1.0",
"detox": "19.0.0",
"eslint": "8.2.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.27.0",
"eslint-plugin-react-hooks": "4.2.0",
"jest": "27.2.3",
"jest-circus": "27.2.3",
"jest-react-native": "18.0.0",
"metro": "0.66.2",
"metro-react-native-babel-preset": "0.66.2",
"metro-resolver": "0.66.2",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.3.1",
"react-native-svg": "12.1.1",
"react-native-svg-transformer": "0.14.3",
"react-test-renderer": "17.0.2",
"ts-jest": "27.0.5",
"typescript": "~4.4.3",
"url-loader": "^3.0.0"
}
}
MikeSpitz
commented
2 years ago After doing the above suggested babel changes you need to make sure you've cleared your metro cache. Run the nx command you use to open the app on iOS simulator followed with --reset-cache and it should work.
aqos156
commented
1 year ago The metro config change works, but has anyone encountered this issue?
The error occurs when I add storybook to the app. Specifically when I use App from storybook and not directly.
Anybody has any ideas why this config change from @kaoDev would break this?
calinvasileandrei
commented
1 year ago I've got the same problem, i use expo , with reanimated v2 and if i try to use the hook useAnimatedStyle it throws :Synchronously call function error.
Example code directly inside the App.tsx
const opacity = useSharedValue(100);
const styleContainer = useAnimatedStyle(() => {
return {
opacity: withTiming(opacity.value , {
duration: 100,
easing: Easing.linear
})
};
});
return (
<Animated.View style={[styleContainer]}>
</Animated.View>
)Versions: "react-native-reanimated": "~2.12.0", "expo": "~47.0.12", "react-native": "0.70.5"
Description
Hi guys! I am testing the example https://docs.swmansion.com/react-native-reanimated/docs/api/useAnimatedGestureHandler in my app. As soon as I load the screen, error pops up. If I comment useAnimatedStyle hook, no error is thrown.
Screenshots
Steps To Reproduce
Expected behavior
As the example shows with no error thrown
Actual behavior
Error thrown:
Snack or minimal code example
Package versions