Closed jahglow closed 8 months ago
dan-fein
commented
2 years ago I'm also getting this and have no idea what to do to fix it. I just upgraded to react native 0.67.3 and it started showing up. Have you been able to find any solution @jahglow?
It says it's occurring in a few different worklet locations like /hook/useAnimatedStyle.js and /core.js
I use react-navigation which requires reanimated so I don't really have a choice but to use it.
ReganL
commented
2 years ago I'm also getting this and have no idea what to do to fix it. I just upgraded to react native
0.67.3and it started showing up. Have you been able to find any solution @jahglow?It says it's occurring in a few different worklet locations like /hook/useAnimatedStyle.js and /core.js
I use react-navigation which requires reanimated so I don't really have a choice but to use it.
Downgrading to version @react-navigation/drawer 6.3.0 works for the time being
gunnartorfis
commented
2 years ago I'm following along with Williams (great) video on Snapchat stories.
When I'm trying to let the shared elements handle the onEnd animation using navigation.goBack(), I receive the following error:
I have tried wrapping the call both with runOnJS and runOnUI without success.
Here's the snippet for reference:
onEnd: ({ velocityX, velocityY }) => {
const goBack = snapPoint(translateY.value, velocityY, [0, WINDOW_HEIGHT]) === WINDOW_HEIGHT;
if (goBack) {
runOnJS(() => {
navigation.goBack();
});
} else {
translateX.value = withSpring(0, { velocity: velocityX });
translateY.value = withSpring(0, { velocity: velocityY });
}
},Here's a reproducable demo: https://github.com/gunnartorfis/reanimated-3049-example Swipe down to drag & dismiss the "modal".
gunnartorfis
commented
2 years ago SOLVED:
runOnJS(navigation.goBack)();
agarwal-nitesh
commented
2 years ago I found this solution stackoverflow. Setting useLegacyImplementation worked for me.
<Drawer.Navigator useLegacyImplementation={true}>
<Drawer.Screen
name={AppScreenName.home}
component={HomeViewController}
/>
</Drawer.Navigator>
jahglow
commented
2 years ago Issue persists through "react-native-reanimated": "^2.6.0" & "@react-navigation/drawer": "6.4.1"
Well, the useLegacyImplementation solves the app crash meaning either react-native-reanimated v2 has a flaw or the drawer is using it in a flawed way so Hermes v0.9 and v0.10 have no idea how to handle it.
I have the DrawerNavigator as the root navigator thus it makes the app crash right after the splashscreen when using RNA v2 with it - as soon as it loads. I managed to get some info out of Sentry for that:
Tried to synchronously call anonymous function from a different thread.
Occurred in worklet location: /Users/johnarcher/mpi-rn/apps/mpi-mobile-wo/node_modules/react-native-reanimated/lib/reanimated2/core.js (127:0)
Possible solutions are: a) If you want to synchronously execute this method, mark it as a Worklet b) If you want to execute this method on the JS thread, wrap it using runOnJS
at com.swmansion.reanimated.AndroidErrorHandler.raise(AndroidErrorHandler.java:6)
at com.swmansion.reanimated.Scheduler.triggerUI(Scheduler.java)
at com.swmansion.reanimated.Scheduler$1.run(Scheduler.java:24)
at com.swmansion.reanimated.Scheduler$2.runGuarded(Scheduler.java:43)
at com.facebook.react.bridge.GuardedRunnable.run(GuardedRunnable.java:31)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6863)
at java.lang.reflect.Method.invoke(Method.java)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)OS Version: Android 9 (ONEPLUS A3010_28_191104)
Report Version: 104
Exception Type: Unknown (SIGABRT)
Application Specific Information:
Abort
Thread 0 Crashed:
0 libc.so 0x78d77e44f0 abort
1 libart.so 0x7852e5a080 art::Runtime::Abort
2 libbase.so 0x78d75955a8 android::base::LogMessage::~LogMessage
3 libart.so 0x7852cd5e6c art::JavaVMExt::JniAbort
4 libart.so 0x7852cd5fe8 art::JavaVMExt::JniAbortV
5 libart.so 0x7852ae9884 <unknown> + 516783249540
6 libart.so 0x7852ae8240 <unknown> + 516783243840
7 libart.so 0x7852ae75a8 <unknown> + 516783240616
8 libart.so 0x7852ae6c38 <unknown> + 516783238200
9 libfbjni.so 0x78380e4098 facebook::jni::isObjectRefType
10 libreanimated.so 0x782f535ac0 facebook::jni::LocalReferenceAllocator::verifyReference
11 libreanimated.so 0x782f535b38 facebook::jni::LocalReferenceAllocator::deleteReference
12 libreanimated.so 0x782f535a80 facebook::jni::base_owned_ref<T>::reset
13 libreanimated.so 0x782f5359c8 facebook::jni::base_owned_ref<T>::reset
dipankurXT
commented
2 years ago I found this solution stackoverflow. Setting
useLegacyImplementationworked for me.<Drawer.Navigator useLegacyImplementation={true}> <Drawer.Screen name={AppScreenName.home} component={HomeViewController} /> </Drawer.Navigator>
This worked for me too. Thanks a lot. 🥳
jahglow
commented
2 years ago @dipankurXT check out a temporary solution that worked for me by @ReganL
jahglow
commented
2 years ago I finally made it work with the latest versions of libraries that used RNR v2 under the hood and it was... importing them from source rather than compiled library. I tried to research it, there are workletHash-es in the compiled code but something made them not propagate to the call when importing the libs from lib rather than src. Added a paths resolution to tsconfig that forwarded the import to src instead of lib.
hhhminme
commented
2 years ago I found this solution stackoverflow. Setting
useLegacyImplementationworked for me.<Drawer.Navigator useLegacyImplementation={true}> <Drawer.Screen name={AppScreenName.home} component={HomeViewController} /> </Drawer.Navigator>
After checking the dependency in expo, I had a hard time because of this error. thanks!
pvinis
commented
2 years ago I finally made it work with the latest versions of libraries that used RNR v2 under the hood and it was... importing them from source rather than compiled library. I tried to research it, there are workletHash-es in the compiled code but something made them not propagate to the call when importing the libs from
librather thansrc. Added apathsresolution to tsconfig that forwarded the import to src instead of lib.
@jahglow would you mind giving us some code for what you added? 🤔
jahglow
commented
2 years ago @pvinis well, a regular import is:
import {
DrawerNavigationOptions,
createDrawerNavigator,
} from '@react-navigation/drawer';the new is:
import {
DrawerNavigationOptions,
createDrawerNavigator,
} from '~@react-navigation/drawer';whereas the tsconfig for resolution is:
{
...
"compilerOptions":{
"paths":{
...
"~@gorhom/bottom-sheet": ["node_modules/@gorhom/bottom-sheet/src"],
"~@react-navigation/drawer": ["node_modules/@react-navigation/drawer/src"]
}
}
} you can do without tsconfig and import from src folder straight away. Well, it might give you typechecking errors cause your rules might be stricter than those of the libraries, so you may use patch-package to create patches of the modified node_modules of these libs, that look like below e.g. when you add a // @ts-nocheck to the erroring file in node_modules creates a patch file patches/@react-navigation+drawer+6.4.1.patch
ignores errors at typechecking (we have stricter rules) in internal method of the component
diff --git a/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx b/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx
index 5d44203..23b5d86 100644
--- a/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx
+++ b/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
import { PlatformPressable } from '@react-navigation/elements';
import { Link, useTheme } from '@react-navigation/native';
import Color from 'color';
AliHaidar110
commented
2 years ago had the same issue with a custom build animation component but works fine when enabling chrome debuger "react-native-draggable-flatlist": "^3.1.1" crashes when enabling chrome debuger
ChristianSauer
commented
2 years ago I have the same problem
redhawk5200
commented
2 years ago Cannot read properties of undefined (reading 'configurations').
Can anybody please help me with this error, I am getting this everytime I run react-native run-android.
ggchicote
commented
2 years ago I found this solution stackoverflow. Setting
useLegacyImplementationworked for me.<Drawer.Navigator useLegacyImplementation={true}> <Drawer.Screen name={AppScreenName.home} component={HomeViewController} /> </Drawer.Navigator>
It works for me! Thanks a lot!
github-actions[bot]
commented
2 years 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?
BliiTzZ
commented
2 years ago Bonjour, j'ai eu le même soucis, et il suffit de supprimer le cache en faisant yarn start --reset-cache ou npm start -- --reset-cache (ou expo start -c si vous utilisez expo)
mirzahayat
commented
2 years ago Actually javascript functions that will be executed on the UI Thread. Consequently if you have functions that can only be executed on the javascript thread and need to be launched from a worklet it must always be specified with runOnJS. try ti use this flow hope so it will helpfull
import Animated, { runOnJS, } from 'react-native-reanimated';
const progress = useSharedValue(0);
const AnimatedProgress = () => { progress.value = withTiming(1, {duration: 1000 * 5}, () => { progress.value = 0; runOnJS(jsRenderFun)(); }); };
const jsRenderFun=()=>{ console.log("JS render"); }
jsRenderFun this function will be render when the animation complete.
tomekzaw
commented
8 months ago Problem: Tried to synchronously call anonymous function from a different thread
Solution: https://github.com/software-mansion/react-native-reanimated/issues/3049#issuecomment-1065626833
-runOnJS(() => {
- navigation.goBack();
-});
+runOnJS(navigation.goBack)();Re https://github.com/software-mansion/react-native-reanimated/issues/3049#issuecomment-1074873091
Problem: useLegacyImplementation is no longer available with Reanimated 3:
Solution: Remove useLegacyImplementation prop
-<Drawer.Navigator useLegacyImplementation={true}>
+<Drawer.Navigator>
<Drawer.Screen {...props} />
</Drawer.Navigator>Closing this issue since it has been solved in https://github.com/software-mansion/react-native-reanimated/issues/3049#issuecomment-1065626833.
Description
Just installed reanimated v2.4.1 and tried to use it with react-navigation/drawer (latest) and all I get is this error on both android and ios. Babel plugin is listed last. No idea what to change. RN version : latest. Hermes enabled. Stack navigator works flawlessly.
Expected behavior
Actual behavior & steps to reproduce
Snack or minimal code example
Package versions
Affected platforms